Re: [w3c/webcomponents] Should shadow host have `display: block` by default? (#426)

In contrast to solutions like `:host { display: block }`, the above idea is easy to work with in terms of class inheritance. How would otherwise someone change an inherited value from a base class that puts this style into the shadow root (and imagine the shadow root is private)?

Also imagine elements that do not need shadow roots, but still want custom styling. #468 may solve it, but:

- it works fine when library authors also call `customElements.define('library-element')` on behalf of users.
- But for library authors that give users a class and tell them to register it under the name they choose, this becomes clunky
  - f.e. "to use the element, call `customElements.define()` with any name you desire. Oh, yeah, also don't forget to pass in all of these styles and options"

Class inheritance seems to be the best way to do it, considering that we're using `class`es.

Library author makes a class:

```js
export default class SomeEl extends HTMLElement {
  suppose custom elements can provide "user agent" styles, like builtins.
  static stylesheet = `
    display: block
  `

  // or, now that we're gonna have constructible stylesheets:
  static stylesheet = new CSSStyleSheet( ... )
}
```

Then the end user can use the element:

```js
import SomeEl from 'some-lib'

// avoids a name clash with another custom element lib
customElements.define('somelib-el', SomeEl) // has default style
```

-- 
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/426#issuecomment-457968031