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.