Web Components使用（一）

news/2024/5/16 5:00:27

在使用Web Components之前，我们先看看上一篇文章Web Components简介，其中提到了相关的接口、属性和方法。
正是这些接口、属性和方法才实现了Web Components的主要技术：Custom elements（自定义元素）、Shadow DOM（影子DOM）、HTML templates（HTML模板）。
由于并不是所有的接口以及接口所包含的方法都会被用到，所以我们从实际的案例出发，逐步了解Web Components的使用。

需求1：创建一个基础的组件，包含一个输入框，和一个button。

mian.js

class SearchInput extends HTMLElement {constructor() {super();// 创建一个 shadow rootlet shadow = this.attachShadow({mode: 'open'});const input = document.createElement('input');input.setAttribute('type', 'text');input.setAttribute('class', 'input-vlaue');const button = document.createElement('input');button.setAttribute('type', 'button');button.setAttribute('value', 'Search');// 创建一些 CSS，并应用到 shadow dom上let style = document.createElement('style');style.textContent=".input-vlaue{margin:5px; color:red;}";shadow.append(input);shadow.append(button);shadow.append(style);}
}// declare var customElements: CustomElementRegistry;
customElements.define('search-input', SearchInput);

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./main.js"></script>
</head>
<body><search-input></search-input><search-input></search-input><search-input></search-input>
</body>
</html>

运行结果
这样子，一个input + button的组件就实现了。这里用到的技术有Custom elements（自定义元素）、Shadow DOM（影子DOM）。

使用Shadow DOM的好处：Shadow DOM 内部的元素始终不会影响到它外部的元素

**要注意的是，不是每一种类型的元素都可以附加到shadow root（影子根）下面。**出于安全考虑，一些元素不能使用 shadow DOM（例如<a>），以及许多其他的元素。

Element.attachShadow() 方法给指定的元素挂载一个Shadow DOM，并且返回对 ShadowRoot 的引用。具体方法:创建一个ShadowRoot并返回它：

attachShadow(init: ShadowRootInit): ShadowRoot;

attachShadow()的参数是一个对象，里面包含两个属性，mode和delegatesFocus。

mode：可以是open/closed。

open：shadow root元素可以从js外部访问根节点
closed：拒绝从js外部访问关闭的shadow root节点

delegatesFocus 焦点委托

一个布尔值, 当设置为 true 时, 指定减轻自定义元素的聚焦性能问题行为.
当shadow DOM中不可聚焦的部分被点击时, 让第一个可聚焦的部分成为焦点, 并且shadow host（影子主机）将提供所有可用的 :focus 样式.

使用Custom elements（自定义元素）的好处：语义化，简单明了。

customElements.define(‘search-input’, SearchInput)实现了CustomElementRegistry接口，无返回值:

interface CustomElementRegistry {define(name: string, constructor: CustomElementConstructor, options?: ElementDefinitionOptions): void;get(name: string): any;upgrade(root: Node): void;whenDefined(name: string): Promise<void>;
}

需求2：可是真正的组件不仅仅有显示的功能，还需要绑定一些事件，例如上面的例子，点击了如何触发search事件呢？

核心：element.addEventListener()

代码示例（index.html不变）：

class SearchInput extends HTMLElement {constructor() {super();// 创建一个 shadow rootlet shadow = this.attachShadow({mode: 'open'});const input = document.createElement('input');input.setAttribute('type', 'text');input.setAttribute('class', 'input-vlaue');const button = document.createElement('input');button.setAttribute('type', 'button');button.setAttribute('value', 'Search');const text = document.createElement('p');// 创建一些 CSS，并应用到 shadow dom上let style = document.createElement('style');style.textContent=".input-vlaue{margin:5px; color:red;}";shadow.append(input);shadow.append(button);shadow.append(text);shadow.append(style);button.addEventListener('click', e => {text.textContent = '按钮被点击了~'});}
}// declare var customElements: CustomElementRegistry;
customElements.define('search-input', SearchInput);

需求3：我们知道，像react、vue都有组件自身的状态管理，和利用Props进行数据传递，那么,在web components中是怎么实现的呢？

核心：this.getAttribute(props)，class内部属性，生命周期

main.js

class SearchInput extends HTMLElement {constructor() {super();this.state = { count:0 };// 创建一个 shadow rootlet shadow = this.attachShadow({mode: 'open'});const input = document.createElement('input');input.setAttribute('type', 'text');input.setAttribute('class', 'input-value');const button = document.createElement('input');button.setAttribute('type', 'button');button.setAttribute('value', 'Search');const text = document.createElement('p');// 创建一些 CSS，并应用到 shadow dom上let style = document.createElement('style');style.textContent=".input-vlaue{margin:5px; color:red;}";shadow.append(input);shadow.append(button);shadow.append(text);shadow.append(style);button.addEventListener('click', e => {this.state.count++;text.textContent = `按钮被点击了${this.state.count}次。`});}connectedCallback () {const defaultValue = this.getAttribute('defaultValue');const input = this.shadowRoot.querySelector('.input-value');input.value = defaultValue;}
}// declare var customElements: CustomElementRegistry;
customElements.define('search-input', SearchInput);

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./main.js"></script>
</head>
<body><search-input defaultValue="input1"></search-input><search-input defaultValue="input2"></search-input><search-input defaultValue="input3"></search-input>
</body>
</html>

运行结果