一、核心规范1. HTML 结构规范自定义组件的 HTML 代码必须包含唯一父容器，父容器固定使用类名 template-box，且该命名全局唯一，不可与其他组件重复。

代码示例

<div class="template-box">

 //-------------------------

 // 此处为自定义的组件业务代码

 <div class="demo">示例</div>

 //-------------------------

</div>

2. CSS 样式规范自定义组件的所有样式必须嵌套在 .template-box 类名内部，避免样式全局污染，保证组件样式独立性。

代码示例

<style>

 /* 所有样式均以 .template-box 为根选择器 */

 .template-box .demo{

   color: red;

 }

</style>

二、完整开发示例遵循「获取 DOM → 编写组件 → 注入 DOM」三步流程，完整代码如下：

// 1. 根据组件ID，获取目标容器DOM元素

let dom = document.getElementById('lv62tc');

// 2. 编写自定义组件（集成样式+结构）

let divhtml = `

 <style>

     /* 样式严格嵌套在 template-box 内 */

     .template-box .demo-button{

       background: blue;

       padding: 15px;

       color: white;

       font-size: 36px;

       border: none;

       border-radius: 8px;

       cursor: pointer;

     }

 </style>

 <!-- 唯一父容器 template-box -->

 <div class="template-box">

     <button class="demo-button">示例按钮</button>

 </div>

`;

// 3. 将自定义组件注入目标DOM

dom.innerHTML = divhtml;

三、规范核心要求1.  结构：必须有唯一父容器 .template-box，禁止无父容器的多标签并列写法

2.  样式：所有样式必须嵌套在 .template-box 下，禁止全局样式、无父容器样式

3.  命名：template-box 全局唯一，不与其他组件重名，保障组件隔离性总结1.  结构强制要求：唯一父容器 .template-box

2.  样式强制要求：全部嵌套在 .template-box 内

3.  开发流程：获取 DOM → 编写组件 → 注入 DOM，三步完成组件开发