Re: [WICG/webcomponents] [open-stylable] Collection of user stories (Issue #1052)

Additional user stories and corresponding web platform [tests](https://github.com/htmlcomponents/shadow-layers/tree/main/user-story-tests) for the [collection of user stories #1052](https://github.com/WICG/webcomponents/issues/1052) for ["open-stylable" Shadow Roots #909](https://github.com/WICG/webcomponents/issues/909).

<details>
<summary>25 Inherit @imported CSS file</summary>

As a shadow tree or web component user, I want to inherit into a shadow tree a CSS file that I have already @imported into the page outside the shadow tree, so that I don't have to @import the same CSS file twice (once into the page, and again into the shadow tree).

In other words, I don't want to have to do this:

resets.css file:

```css
button {
  border: thick dashed red;
}
```

Double @import I don't want to do:

```html
<body>
  @import assets/resets.css;
  <button>Button outside a shadow tree</button>
  <button-group>
    <template shadowrootmode="open">
      @import assets/resets.css;
      <button>
        Button inside a shadow tree (thick dashed red) (double imported
        resets.css)
      </button>
    </template>
  </button-group>
</body>
```

See also [Allow authors to apply new css features (like cascade layers) while linking stylesheets #7540](https://github.com/whatwg/html/issues/7540) and [Provide an attribute for assigning a `<link>` to a cascade layer #5853](https://github.com/w3c/csswg-drafts/issues/5853).

Example:

```html
<body>
  @import assets/resets.css layer(resets);
  <button>Button outside a shadow tree</button>
  <button-group>
    <template shadowrootmode="open">
      <style>
        @layer inherit.resets.as.outerresets, outerresets;
      </style>
      <button>
        Button inside a shadow tree (thick dashed red) (from inherited
        resets.css file)
      </button>
    </template>
  </button-group>
</body>
```

</details>

<details>
<summary>26 Page styles only affecting shadow tree</summary>
<p>
As a shadow tree or web component user, I want to provide some page styles outside a shadow tree that won't affect the page at all but can be inherited into the shadow tree, so that I can write page styles that only affect shadow trees.
</p>

- Note that  [when evaluated in the context of a shadow tree](https://drafts.csswg.org/css-scoping/#host-selector), `:host( <compound-selector> )` matches the shadow tree’s shadow host if the shadow host, in its normal context, matches the selector argument. In any other context, it matches nothing. 
- `:host` behaves similarly in any other context.

```html
<style>
  @layer button-group-styles {
    :host(button-group) button {
      border: thick dashed red;
    }
  }
</style>
<button>Button outside a shadow tree (not thick dashed red)</button>
<button-group>
  <template shadowrootmode="open">
    <style>
      @layer inherit.button-group-styles.as.page-defined-styles, page-defined-styles;
    </style>
    <button>
      Button inside a shadow tree (thick dashed red) (from page layer
      'button-group-styles')
    </button>
  </template>
</button-group>
```

</details>

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

Message ID: <WICG/webcomponents/issues/1052/2024164650@github.com>

Received on Wednesday, 27 March 2024 23:49:17 UTC