Re: [csswg-drafts] [css-scoping] Allow elements to expose a subset of their shadow tree, which can then be styled with regular CSS (#10939)

A use case I would like to point out in favour of this approach, is that it enables shadow roots to contain content on behalf of their users.

For example suppose we have a tooltip that shows some content from another file:

```html
<!-- index.html -->
At the event we had <j-tooltip class="cheese-nane" src="./cheese-facts/brie.html">brie</j-tooltip> ...
```

then the shadow root might look something like:

```html
<j-tooltip src="./cheese-facts/brie.html">
    ::shadow-root
        <div id="tooltip-target"><slot></slot></div>

        <div id="tooltip-content" popover="auto">
            <!-- We have an extra div with a shadowroot here to prevent cheese-facts/brie.html stylesheets affecting our shadow root -->
            <div BIKESHED_EXPOSE_SUBTREE>
                ::shadow-root
                    <div BIKESHED_EXPOSE_SUBTREE>
                        <!-- Content from some template in cheese-facts/brie.html -->
                        Brie is a soft cheese ... similar to <j-tooltip class-name="cheese-name" src="./cheese-facts/camembert.html">camembert</j-tooltip>
                    </div>
             </div>
        </div>
</j-tooltip>
```

Users could then target `.cheese-name` (which is **their content** in both trees) easily with the suggested:

```css
/* Just works? */
.cheese-name {
    color: blue;
}
```

without affecting the `j-tooltip` structural parts like `#tooltip-target`

-- 
GitHub Notification of comment by Jamesernator
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10939#issuecomment-2380429471 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 28 September 2024 06:26:58 UTC