position:absolute not working on lit-element

[tamis-laan]

More of a help question, I'm probably doing something wrong here:

@customElement('my-input')
class myInput extends LitElement {
  static get styles() {
    return css`
      :host {
        display:contents;
      }
      input {
        all:inherit;
        display:inline;
      }
      .link {
        position:absolute;
        right:0px;
        top:50%;
      }
    `
  }
  render() {
    return html`
      <input></input>
      <span class=link>content</span>
    `
  }
}

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?

[justinfagnani]

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.

[bengfarrell]

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

[justinfagnani]

Attributes values don't have to be quoted in HTML unless they contain a whitespace, >, <, =, or a quote.

[tamis-laan]

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.

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>.

[justinfagnani]

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.).

[tamis-laan]

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.).

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>?

[sorvell]

Closing based on the discussion above. These are limitations of css in general and there's nothing to address in the Lit library.