如何使用shadow-dom web组件获得一致的聚焦轮廓颜色？

<template id="my-component-template">
  <style>
    :host {
      display: block;
    }

    :host(:focus) {
      outline: 2px solid blue;
    }
  </style>
  <slot></slot>
</template>

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();

      const shadowRoot = this.attachShadow({ mode: 'open' });
      const template = document.getElementById('my-component-template').content;
      shadowRoot.appendChild(template.cloneNode(true));
    }
  }

  customElements.define('my-component', MyComponent);
</script>