WC 前端不包括脚本

WC 是 Web Components 的缩写，是一套由 W3C 提出的 Web 标准，以实现更好的复用性及组件化思想。WC 包括了 Shadow DOM、Custom Elements、HTML Templates 和 ES6 Modules 四项技术。

然而，WC 只是一个组件化的开发思想和标准，并不是指一个完整的框架或库。因此，WC 的前端代码不包括脚本，脚本需要使用 JavaScript 加入组件的逻辑和交互。

Shadow DOM

Shadow DOM 使用 Shadow DOM API 创建一个独立的作用域，在这个作用域内，DOM 树和 CSS 样式都是独立的。使用 Shadow DOM 可以避免组件的样式影响到全局的样式，从而提高代码的复用性和可维护性。

示例代码：

<template id="my-template">
  <style>
    .my-component {
      border: 1px solid black;
      padding: 10px;
    }
  </style>
  <div class="my-component">
    <slot></slot>
  </div>
</template>

<script>
class MyComponent extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: "open" });
    const template = document.getElementById("my-template");
    const nodes = template.content.cloneNode(true);
    shadowRoot.appendChild(nodes);
  }
}

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

Custom Elements

Custom Elements 允许开发者自定义 HTML 标签并对其进行扩展。使用 Custom Elements 可以封装一些复杂的组件，从而提高代码的复用性和可维护性。

示例代码：

<my-component></my-component>

<script>
class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = "Hello, World!";
  }
}

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

HTML Templates

HTML Templates 是一种 HTML 标签，它包含了一些预定义的结构并可以动态地向其中添加内容。使用 HTML Templates 可以将静态的组件结构和动态的组件内容分离，从而提高代码的可读性和可维护性。

示例代码：

<template id="my-template">
  <div>
    <h1>Hello, <slot></slot>!</h1>
  </div>
</template>

<my-component name="World"></my-component>

<script>
class MyComponent extends HTMLElement {
  constructor() {
    super();
    const template = document.getElementById("my-template");
    const shadowRoot = this.attachShadow({ mode: "open" });
    shadowRoot.appendChild(template.content.cloneNode(true));
    shadowRoot.querySelector("slot").textContent = this.getAttribute("name");
  }
}

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

ES6 Modules

ES6 Modules 是一种用于 JavaScript 模块化的语法规范。使用 ES6 Modules 可以将代码分割成多个模块，并通过导入和导出的方式使其相互协作。

示例代码：

// my-component.js
export default class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = "Hello, World!";
  }
}

// main.js
import MyComponent from "./my-component.js";

customElements.define("my-component", MyComponent);

总结

WC 前端不包括脚本，是一种组件化的开发思想和标准，包括了 Shadow DOM、Custom Elements、HTML Templates 和 ES6 Modules 四项技术。开发者需要使用 JavaScript 添加组件的逻辑和交互。WC 可以提高代码的复用性和可维护性，同时也可以提高开发效率和代码的可读性。