如何在HTML中创建自定义标签 实现将带CSS样式的div封装为自定义标签

完全可以将你给出的带样式的div封装为<redbox>自定义标签直接调用，以下是两种常用实现方式：

方案1：极简样式绑定（无需JS） #

直接给自定义标签名设置对应CSS样式即可直接调用，实现成本最低：

/* 自定义标签默认是行内元素，需要手动设置为块级才能生效宽高 */
redbox {
  display: block;
  width: 100px;
  height: 100px;
  background-color: red;
}

HTML中直接调用即可：

<redbox></redbox>
<br>
<p>直接调用自定义redbox标签即可</p>

该方案适合只有样式需求、不需要封装内部结构和交互逻辑的场景，缺点是样式为全局设置，没有隔离能力，容易被其他全局样式覆盖。

方案2：标准Web Components自定义元素（带封装能力） #

如果需要完整的封装能力（包括内部结构隔离、样式隔离、自定义交互逻辑），可以用HTML标准的自定义元素规范实现：

// 定义自定义元素类
class RedBox extends HTMLElement {
  constructor() {
    super();
    // 开启Shadow DOM实现样式和结构隔离，内部代码不会污染全局
    const shadow = this.attachShadow({mode: 'open'});
    // 创建内部容器
    const box = document.createElement('div');
    // 定义内部专属样式
    const style = document.createElement('style');
    style.textContent = `
      div {
        width: 100px;
        height: 100px;
        background-color: red;
      }
    `;
    shadow.appendChild(style);
    shadow.appendChild(box);
  }
}
// 注册自定义标签
customElements.define('redbox', RedBox);

注册完成后HTML中使用方式和方案1完全一致，直接写<redbox></redbox>即可。该方案符合W3C标准，还可以扩展自定义属性、事件交互等复杂功能，适合正式项目的组件封装场景。

内容的提问来源于stack exchange，提问作者user16826598