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

使用shadow-dom web组件获得一致的聚焦轮廓颜色的方法是通过CSS样式来控制。在shadow-dom中，可以使用:focus伪类选择器来定义聚焦状态下的样式。

首先，创建一个shadow-dom web组件，可以使用<template>标签和<slot>标签来定义组件的结构。然后，在组件的样式中，使用:focus伪类选择器来定义聚焦状态下的样式。

示例代码如下：

<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>

在上述代码中，:host选择器表示组件自身，:focus选择器表示聚焦状态。在:host(:focus)中，定义了一个蓝色的2px实线边框作为聚焦状态下的样式。

使用该组件时，只需在HTML中添加<my-component>标签即可。当该组件被聚焦时，会显示蓝色的边框。

这种方法可以确保在使用shadow-dom web组件时，聚焦轮廓颜色保持一致。