Re: [WICG/webcomponents] Web components should be able to easily adapt to the host page while maintaining enapsulation (Issue #986)

I probably phrased my question a bit weird.

Say you have a document style sheet with `.danger { --color: red }` to mark dangerous buttons in a different colour.

In a shadow root you do `button { @include from-root(button); }`, would a `<button class="danger">` be red, or would that rule be ignored because the selector (`.danger`) does not match `button`?

The reason I think this is important is that selectors can often get a little bit more complex in the real world and, personally, I think it would be a more common use-case to specify a selector and have all matching elements be styled "like outside", instead of white-listing specific selectors that we want to pull in.

Say for example I have a list of selectors like `button`, `button:hover`, `button:focus` and `button.danger`; the first three could somehow be defined to all get pulled in with just `button`, but not the last one.

I don't see much of a downside to including the `.danger` selector, as it could provide a mechanism for components to support certain frameworks out of the box (say you just add `uk-button` or whatever it's called to all of your buttons; if the host uses uikit it just works, otherwise it does nothing.)

This would also allow for more complex selectors like `button:has(+ button) { /* no right margin */ } button+button { /* no left margin */ }` (a simple button-group) to apply within a shadow DOM, which would otherwise require a lot of fine-tuning for what to let through.

Of course, this assumes that more purpose-specific class names won't usually clash and are given reasonable names, which might not always be the case. But this can easily be circumvented by prefixing classes inside the shadow DOM that should not pull in outside styles like `<button class="gallery-danger gallery-delete uk-button">`, which *might* be a good convention for components anyway.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/986#issuecomment-1457577259
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/986/1457577259@github.com>