机械加工厂家_品牌建设内容措施_百度竞价推广怎么样才有效果_营销型企业网站建设步骤

什么是web Component ?

mdn 官方定义： Web Component

Web Component 是一套不同的技术，允许你创建可重用的定制元素（它们的功能封装在你的代码之外）并且在你的 web 应用中使用它们。

简单来说他是一组标准化的web技术，允许开发者来创建可重用的自定义标签，并且这些标签可以在不同的web应用中使用，并且可以封装内部逻辑和样式避免与使用页面的其他部门发生冲突。

Web Component主要有以下3个规范组成：

• Custom element（自定义元素）：自定义标签以及行为

• Shadow DOM（影子 DOM）:  提供DOM树与页面其余部分隔离的方法，确保样式不会泄露到全局。

• HTML template（HTML 模板）: 用于定义可重复使用的 HTML 片段，这些片段在初始加载时不会被渲染，但可以在需要时插入文档

Web Components 解决了什么问题？

1. 可重用性：开发者可以创建一次组件并在多个项目中重复使用，减少了代码冗余，提高了开发效率。

2. 封装性：使用 Shadow DOM 封装样式和逻辑，确保组件内部的样式和脚本不会影响页面的其他部分，反之亦然。这有助于构建更稳定、更易于维护的应用程序。

3. 互操作性：Web Components 是基于标准的，因此可以在不同的框架和库之间无缝工作。无论你使用的是 React、Vue 还是纯 JavaScript，都可以轻松集成 Web Components。

4. 模块化：组件化的开发方式使得代码更加模块化，便于团队协作和代码管理。每个组件可以独立开发、测试和部署。

5. 简化前端开发：Web Components 提供了一种简单而强大的方法来构建复杂的用户界面，降低了前端开发的复杂度，尤其是对于大型应用。

实现 Web Components ？

通过Web Component实现一个自定义元素，通常需要一下5步骤：

步骤一： 创建一个类或函数来指定 web 组件的功能，

步骤二：使用 CustomElementRegistry.define() 方法注册你的新自定义元素。

步骤三：使用 Element.attachShadow() 方法将一个 shadow DOM 附加到自定义元素上，可以根据需求是否添加。

步骤四：使用 <template> 和 <slot> 定义一个 HTML 模板。可以根据需求是否定义。

步骤五：页面中使用。uabn

使用自定义元素：

自定义元素类型：

• 自定义内置元素：继承自标准的HTML元素，如HTMLImageElement、 HTMLParagraphElement，已经实现了标准元素的行为。
• 独立自定义元素： 继承HTML元素基类HTMLElement, 必须从头实现行为。

实现：以独立自定义元素为案例：（在构造函数中不能检查元素的属性或子元素，也不应添加新的属性或子元素 ）构造函数如下

// 自定义内置
class WordCount extends HTMLParagraphElement {constructor() {super();}// 此处编写元素功能
}
// 独立自定义元素
class PopupInfo extends HTMLElement {constructor() {super();}// 声明周期回调connectedCallback() {console.log("自定义元素添加至页面。");}disconnectedCallback() {console.log("自定义元素从页面中移除。");}adoptedCallback() {console.log("自定义元素移动至新页面。");}attributeChangedCallback(name, oldValue, newValue) {console.log(`属性 ${name} 已变更。`);}
}

注册：使用Window.customElements 的 define() 方法注册自定义元素， 方法参数如下：

• name: 元素名称， 命名必须小写字母开头包含一个连字符
• constructor: 自定义元素的构造函数
• options： 仅对自定义内置元素生效，配置要拓展的元素

自定义内置元素注册和使用：

// 注册：
customElements.define("word-count", WordCount, { extends: "p" });// 使用：作为is属性的值
<p is="word-count"></p>

独立自定义元素注册和使用：

// 注册：
customElements.define("popup-info", PopupInfo);// 使用：
<popup-info><!-- 元素的内容 -->
</popup-info>

响应属性变化：与内置元素一样， 自定义元素可以使用HTML来配置元素的行为， 为此可以添加如下属性：

• observedAttributes：静态属性，包含变更通知的所有属性数组。
• attributeChangedCallback()：生命周期回调实现。（此方法在observedAttributes属性变动时调用）

例如： 观察size属性，并在变化时记录新旧值。

// 为这个元素创建类
class MyCustomElement extends HTMLElement {static observedAttributes = ["size"];constructor() {super();}attributeChangedCallback(name, oldValue, newValue) {console.log(`属性 ${name} 已由 ${oldValue} 变更为 ${newValue}。`);}
}customElements.define("my-custom-element", MyCustomElement);

请注意，如果元素的 HTML 声明包含一个被观察的属性，那么在属性被初始化后，attributeChangedCallback() 将在元素的声明首次解析时被调用。

使用影子DOM: 

影子 DOM（Shadow DOM）允许你将一个 DOM 树附加到一个元素上，并且使该树的内部对于在页面中运行的 JavaScript 和 CSS 是隐藏的。在其之下你可以用与普通 DOM 相同的方式附加任何元素

1、创建：调用影子宿主DOM上的 attachShadow() 来创建影子 DOM

        参数说明：{mode: "open"}: 页面中可通过影子宿主的 shadowRoot 属性访问影子 DOM 的内部，如果不希望破坏影子 DOM 封装，可设置{mode: "closed"} 

const host = document.querySelector("#host");
const shadow = host.attachShadow({ mode: "open" });
const span = document.createElement("span");
span.textContent = "I'm in the shadow DOM";
shadow.appendChild(span);

  页面展示看起来是这样

2、CSS样式应用：

• 编程式：构建 CSSStyleSheet 附加到影子根。
• 声明式：在template声明中添加style元素

编程式实现：1.创建一个空的CSSStyleSheet对象，2.使用replace()/replaceSync()设置内容，3.通过ShadowRoot.adoptedStyleSheets来添加到影子根：,

const sheet = new CSSStyleSheet();
sheet.replaceSync("span { color: red; border: 2px dotted black;}");const host = document.querySelector("#host");const shadow = host.attachShadow({ mode: "open" });
shadow.adoptedStyleSheets = [sheet];const span = document.createElement("span");
span.textContent = "I'm in the shadow DOM";
shadow.appendChild(span);

声明式实现：1.创建template,并添加style标签和样式内容，2.创建影子dom,并将template的内容添加到影子Dom

<template id="my-element"><style>span {color: red;border: 2px dotted black;}</style><span>I'm in the shadow DOM</span>
</template><div id="host"></div>// 创建影子 DOM 并将 <template> 的内容添加到其中：
const host = document.querySelector("#host");
const shadow = host.attachShadow({ mode: "open" });
const template = document.getElementById("my-element");shadow.appendChild(template.content);

以上两种方式使用选择推荐：

编程式：样式表需要与多个dom树共享时推荐使用。

声明式：需要较少的样式并且不需要在不同组件之间共享样式的时候

3. 影子DOM和自定义元素：

如果没有影子DOM提供封装，自定义元素将无法使用，页面上运行的其他js或css,可能无意间破坏自定义元素的行为或布局。

自定义元素被实现为一个类，它可以继承内置 HTML 元素。通常，自定义元素本身是一个影子宿主，该元素在其根节点下创建多个元素，以提供元素的内部实现。

例如： 创建自定义元素，仅渲染一个实心颜色圆形。

class FilledCircle extends HTMLElement {constructor() {super();}connectedCallback() {// 创建一个影子根// 自定义元素自身是影子宿主const shadow = this.attachShadow({ mode: "open" });// 创建内部实现const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");const circle = document.createElementNS("http://www.w3.org/2000/svg","circle",);circle.setAttribute("cx", "50");circle.setAttribute("cy", "50");circle.setAttribute("r", "50");circle.setAttribute("fill", this.getAttribute("color"));svg.appendChild(circle);shadow.appendChild(svg);}
}customElements.define("filled-circle", FilledCircle);

使用模版和插槽：

如何使用<template>和<slot>元素创建一个灵活填充web组件的影子DOM的模版。

当你必须在网页上复用相同的标记结构时，使用某种模板而不是一遍又一遍地重复相同的结构是有意义的。以前也可以实现这一点，但 HTML <template> 元素使得这个过程更加简单。此元素及其内容不会在 DOM 中渲染，但仍可使用 JavaScript 引用它。

1.使用模版：（相较于原生创建dom追加元素更便捷，并且复用性高）

customElements.define("my-paragraph",class extends HTMLElement {constructor() {super();let template = document.getElementById("my-paragraph");let templateContent = template.content;const shadowRoot = this.attachShadow({ mode: "open" });shadowRoot.appendChild(templateContent.cloneNode(true));}},
);

2. 使用插槽：使用slot通过声明式语法在实例中展示不同文本。

模版改造：

<template id="my-paragraph"><p><slot name="my-text">我的默认文本</slot></p>
</template>

使用：

<my-paragraph><span slot="my-text">让我们使用一些不同的文本！</span>
</my-paragraph>