Re: [w3c/webcomponents] Provide a lightweight mechanism to add styles to a custom element (#468)

@alextech

> How Is this different from @ apply (assuming it will be eventually implemented and will work cross shadow boundary)?

Even if `@apply` were to be cross-shadow, we'd need to add a shadow root (with a style element in it) to every element that needs to have a `:host` style `@apply`d, even if the element _will not have_ any content in the shadow root except a `<slot>` element just so light content renders. This is lots of overhead: for example, for 1000 elements that don't need a shadow root other than to apply host styling, we will instantiate 1000 shadow roots and 1000 style elements. Compare this to instantiating 1 string mapped to 1 style sheet; applying the style to all 1000 elements with just the 1 string and 1 stylesheet.

`@apply` works inside of a stylesheet, while this new mechanism is a way to apply a stylesheet from outside a stylesheet (not CSS), and so with this map we can define how styles are applied in way that isn't as heavy as the shadow DOM approach.

---

But in the topic of `@apply`, it could be possible to just make an out-of-CSS mechanism to apply custom properties on a custom element. F.e.:

```js
class MyEl extends HTMLElement {
  static get styles() { return [
    "--some-rules", "--other-rules"
  ]}
}
```

or

```js
customElements.define('my-el', MyEl, {
  apply: [ "--some-rules", "--other-rules" ]
})
```

But that might be less flexible. Stylesheets support features besides rules (media queries, animation keyframes).

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