在 HTML 中使用自定义标签和 Shadow DOM 来创建组件，可以通过以下步骤实现：
定义自定义标签：使用<template>标签定义一个模板，模板中可以包含 HTML 结构和 CSS 样式。
注册自定义元素：使用window.customElements.define()方法注册自定义元素，第一个参数是自定义元素的名称，第二个参数是一个类，该类继承自HTMLElement。
创建 Shadow DOM：在自定义元素的构造函数中，使用this.attachShadow()方法创建一个 Shadow DOM，并将模板内容插入 Shadow DOM 中。
实现组件逻辑：在自定义元素的构造函数或其他方法中，实现组件的逻辑。
以下是一个简单的例子，实现了一个自定义元素<my-button>，它包含一个按钮和一些样式：
<template id="my-button-template">
<style>
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<button><slot></slot></button>
</template>
<script>
class MyButton extends HTMLElement {
constructor() {
super();
const template = document.getElementById('my-button-template');
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(template.content.cloneNode(true));
}
}
window.customElements.define('my-button', MyButton);
</script>在上面的例子中，我们使用了<template>标签定义了一个模板，包含了一个按钮和一些样式。然后我们定义了一个MyButton类，并在它的构造函数中创建了一个 Shadow DOM，并将模板内容插入其中。最后我们使用window.customElements.define()方法注册了自定义元素<my-button>。
这样，我们就可以在 HTML 中像使用普通元素一样使用<my-button>元素了：
<my-button>Click me!</my-button>在实现组件逻辑时，我们可以在构造函数或其他方法中，通过this.shadowRoot来获取 Shadow DOM 中的元素，从而实现组件的交互和样式逻辑。
需要注意的是，自定义元素和 Shadow DOM 目前还不是所有浏览器都支持，所以在使用时要注意浏览器的兼容性。