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

@matthewp 

> @knowler's approach is a push syntax isn't it?

That example looks like push but it can be made pull-like with some intention.

```css
@scope (:root, .pull-into-shadow:shadowroot)
```

```html
<body class="pull-into-shadow"><body>
<my-element class="pull-into-shadow"></my-element>
<div class="pull-into-shadow"></div>
```

The key difference is that this convention is defined by the page author, so it's not suitable for component authors. Maybe not a problem, since DSD itself is the page author's responsibility.

> If all global .css files needed that wrapper it would be a bummer 

I agree. It would be nice if this could be done for whole stylesheets from the outside.

```css
@import "styles.css" scope(:root, .pull-into-shadow:shadowroot)
```

Fwiw [media queries can already do this](https://developer.mozilla.org/en-US/docs/Web/CSS/@import#importing_css_rules_conditional_on_media_queries).

It looks like this using @bkardell's [`half-light`](https://bkardell.com/blog/half-light.html) convention:

```css
@import "styles.css" media(screen, --crossroot);
```

…which makes me think maybe `@scope` is maybe not the best way to do this? Not without multiple new syntaxes at least.


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

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

Received on Wednesday, 13 March 2024 18:23:16 UTC