[reactive-element] Normalize adoptStyles so that it works x-browser when called to modify instance styles

[sorvell]

ReactiveElement supports static styles that are not modified per instance. This was done so that support for Web Components polyfilled styling via ShadyCSS (which does not support instance styling) would work. The adoptStyles function was designed for this use case.

However, now that a significant portion of users do not need Web Components polyfills, it's reasonable to start introducing better instance based styling. Currently adoptStyles works inconsistently when the underlying adoptedStylesheets is supported or not. This behavior should be normalized so that it works the same x-browser when native Shadow DOM is used.

Separately, users have asked for a way to add styles rather than re-apply them. This could be done as a separate method or an alternative signature.

[sorvell]

We've decided not to address this issue. On browsers that support adoptedStyleSheets, you can call this.shadowRoot.adoptedStyleSheets.push. Only Safari doesn't currently support this.

However, it looks like Safari support will be added soon, see WebKit/WebKit#4872.

Given that and the code size impact of #3060, we've elected to wait for native support.

[jimmywarting]

It was unclear to me if lit did support

import style from './style.css' assert { type: 'css' }

class NameTag extends LitElement {
  static styles = style
}

but it was able to understand it. i guess the example confused me a bit as to why your example was more like:

import {LitElement, css} from 'lit'

export class MyElement extends LitElement {
  static styles = css`p { color: green; }`
}

i think that the example should be like have been more like the constructible CSSStyleSheet.

import { LitElement } from 'lit'

const css = new CSSStyleSheet()
css.replaceSync(`p { color: green; }`)

export class MyElement extends LitElement {
  static styles = css
}

(or as the first example at the very top)
so i blame this doc for not using native approaches or isn't refering to how to use native approaches instead.