quick custom element with shadow dom #JavaScript

custom.js

class Test extends HTMLElement {
  constructor() {
    super();
    const sheet = new CSSStyleSheet();
    sheet.replaceSync('a { color: green; }'); /* wins!? */
    this.attachShadow({mode: 'open'});
    this.shadowRoot.adoptedStyleSheets = [sheet];
    this.template = document.createElement('template');
    this.template.innerHTML = `
      <style>
        a {
          color: blue; /* doesn't win!? */
        }
      </style>
      <a href="#nowhere">Why is this not blue?</a>
    `;
    this.shadowRoot.replaceChildren(this.template.content.cloneNode(true));
  }
}

customElements.define('t-est', Test);

index.html

<t-est></t-est>

see https://codepen.io/heydon/pen/XWyXVgy/bd624754dff688bdf5d9d435de73aef3?editors=1010