Closed tamis-laan closed 2 years ago
position: absolute
elements are positioned wrt their offset parent, which is the closest position: relative
ancestor. You'll need position: relative
on this element's container, or on :host
but then you'd need to remove display: contents
.
Unless lit-html has a superpower I wasn't aware of, you'd need your class="link"
in quotes as well
Edit: Looks like I'm wrong! Didn't realize quotes weren't necessary, just been doing it that way forever without trying otherwise
Attributes values don't have to be quoted in HTML unless they contain a whitespace, >
, <
, =
, or a quote.
position: absolute
elements are positioned wrt their offset parent, which is the closestposition: relative
ancestor. You'll needposition: relative
on this element's container, or on:host
but then you'd need to removedisplay: contents
.
If I add position:relative
to the input
element and then <input> <span class=link>content</span> </input>
it still positions the span
relative to the parent of the web-component, and not relative to <input>
.
The <span>
is not a descendant of the <input>
, so putting position: relative
on the input won't do anything. You either need position: relative
on the host (and remove display: contents
) or you need position: relative
on what container element of this element is (and that won't work correctly if that container has multiple children, padding, etc.).
The
<span>
is not a descendant of the<input>
, so puttingposition: relative
on the input won't do anything. You either needposition: relative
on the host (and removedisplay: contents
) or you needposition: relative
on what container element of this element is (and that won't work correctly if that container has multiple children, padding, etc.).
I'm trying to wrap <input>
for special formatting and extra functionality, if I create a container element around <input>
I wont be able to use all:inherit
css on <input>
and so styling will become an issue.
Unless there is some way to pass on the css styling from :host
through the container to <input>
?
Closing based on the discussion above. These are limitations of css in general and there's nothing to address in the Lit library.
More of a help question, I'm probably doing something wrong here:
I would expect content to be placed inside the input on the right side, instead it is placed relative to the parent element. If I place the
<span>
inside the<input>
element the same happens. This is not the behavior I would expect, what is going on here?