Implement adoptedStyleSheets for Custom Elements

[kliehm]

In the function _applyStyles in apiCustomElements.ts styles are still prepended as a style element in the shadowRoot. Modern browsers support shadowRoot.adoptedStyleSheets with the advantage, that it doesn't need the Content Security Policy style-src 'unsafe-inline' or nonce (see issue #6530).

I would propose to check if the user agent supports adoptedStyleSheets and use that method then, and the style element only as a fallback for legacy browsers, like this:

if (styles) {
  styles.forEach((css) => {
    if (this.shadowRoot.adoptedStyleSheets) {
      const sheet = new CSSStyleSheet();
      sheet.replaceSync(css);
      this.shadowRoot.adoptedStyleSheets = [...this.shadowRoot.adoptedStyleSheets, sheet];
    } else {
      const s = document.createElement('style')
      if (nonce) s.setAttribute('nonce', nonce)
      s.textContent = css;
      this.shadowRoot!.prepend(s);
      ...
    }
  });
}