JimDabell • 1 day ago

Web components are pretty terrible, and do not work as you would expect them to. Take this, for example

    <some-element>
        <input type="text">
    </some-element>
So <some-element> is a web component that adds extra features to the input. So it constructs a shadow DOM, puts the <input> into it, styles the input appropriately, etc. And before the web component finishes loading, or if it fails, or if web components aren’t supported in some way, it still works like a normal <input>.

Now take this:

    <some-element>
        <textarea>…</textarea>
    </some-element>
Same thing. You’ve got a normal <textarea>, and the web component adds its extra stuff.

Now take this:

    <some-element>
        <select>
            <option>…</option>
        </select>
    </some-element>
Same thing, right? Nope! This doesn’t work! Web components can only style their immediate children. So the first web component can style the <input> element, the second web component can style the <textarea> element, and the third web component can style the <select> element… but it can’t style the <option> element.

Web components are full of all of these random footguns.

1
rafram • 1 day ago

> Web components can only style their immediate children.

This isn’t true at all. You’re doing something incorrect when creating your shadow root or adding your styles. (“Web components” aren’t really a thing - it’s a marketing term for a set of technologies - so I assume that you’re talking about custom elements with shadow roots here.)

1 reply
JimDabell • 1 day ago

Refer to example 4 in the CSS Scoping specification:

> It will not select #three (no slot attribute) nor #four (only direct children of a shadow host can be assigned to a slot).

— https://drafts.csswg.org/css-scoping/#example-7cc70c2d

I’m talking about the #four case.

Alternatively, refer to the issue that was opened in the web components issue tracker here:

> > you can only select a direct item within the slot

> That is by design. See #331 for details.

> We don't have a plan to support an arbitrary selector for ::slotted.

— https://github.com/WICG/webcomponents/issues/594#issuecommen...

> “Web components” aren’t really a thing

This is an empty nitpick. The people writing the specs call them web components, the people implementing them call them web components, the people writing them call them web components. There is nothing wrong with calling them web components.

> I assume that you’re talking about custom elements with shadow roots here.

You don’t have to assume anything. I explicitly said that it constructed a shadow DOM.

1 reply
rafram • 19 hours ago

Yeah, slotted elements have to be direct children, but you can select any descendant in CSS. That text is only referring to the ::slotted() pseudo-element.