Re: [WICG/webcomponents] "open-stylable" Shadow Roots (#909)

> _**Who** is opting-in the shadow root to become stylable by its container – the component author or component consumer?_

@nolanlawson In this case **it would ultimately be the component author opting in**. In some ways, I feel like this decision has already been made with the design of the Shadow DOM (this idea doesn’t require a different shadow root mode). What’s notable here is that **the effect of it being opted-in doesn’t apply until the consumer chooses to set a shadow root’s layer in the host’s context**: the component would remain cascaded before the document styles until the consumer also opted-in. In some ways, this provides authors more incentive to opt-in.

I also want to point out some existing CSS mechanisms which can be used to further apply what’s “important” for both the component author or the component consumer after a component has been opted into “host layerable styling” and had its layer set:

1. Component authors can selectively opt-out of styles from the host’s layer with [the `revert` keyword](https://developer.mozilla.org/en-US/docs/Web/CSS/revert). Since specificity is not a factor between layers (i.e. the document’s layer and the shadow context), this is easy to apply.
    ```css
    /* Host context */
    @layer defaults shadow(my-element, another-element) {
        button { color: DeepPink; }
    }
    ```
    ```css
    /* Shadow context */
    button:first-of-type { color: revert; } /* Since this is layered after it’s easy to override the styles from the host. */
    button:nth-of-type(2) { color: Crimson; } /* Regular component styles will also override the host’s styles. */
    button:nth-of-type(3) { all: revert; } /* You can fairly easy completely reset an element which effectively opts an element in the tree out of the host’s styles. Remember this must be applied to pseudo-classes as well. */
    ```
2. Component consumers can selectively enforce their own styles using `!important`. Since a shadow root’s styles would be cascaded after its host’s context, if `!important` was used in those styles it would prevent the shadow context’s styles from applying.
    ```css
    /* Host context */
    @layer defaults shadow(my-element, another-element) {
        button { color: DeepPink !important; }
    }
    ```
    ```css
    /* Shadow context */
    button:first-of-type { color: Crimson; } /* Doesn’t work */
    button:nth-of-type(2) { color: revert; } /* Doesn’t work */
    button:nth-of-type(3) { color: revert !important; } /* Still doesn’t work */
    ```

The consumer ultimately wins in the scenario where both are using their mechanism to “take the reins.” That does seem in line with [certain design principles](https://www.w3.org/TR/html-design-principles/#priority-of-constituencies).

This idea isn’t easily polyfillable, but [you can use a Shadow DOM-less technique to demonstrate how the author-consumer styling relationship would play out (demo)](https://knowler.dev/demos/UQkWynQ?codepen).

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

Message ID: <WICG/webcomponents/issues/909/1884210351@github.com>