使用自定义元素

您所在的位置：网站首页 › web组件支持下列哪些属性或事件类型设置 › 使用自定义元素

使用自定义元素

#使用自定义元素| 来源: 网络整理| 查看: 265

到目前为止，我们只看到了一个生命周期回调的实际应用：connectedCallback()。在最后一个示例————中，我们将看到一些其他的回调。独立自定义元素绘制一个正方形，其大小和颜色由两个名为 "size" 和 "color" 的属性确定。

查看在线示例查看源代码

在类的构造函数中，我们将影子 DOM 附加到元素上，然后再附加空的和元素到影子根上：

constructor() { // 必须首先调用 super 方法 super(); const shadow = this.attachShadow({ mode: "open" }); const div = document.createElement("div"); const style = document.createElement("style"); shadow.appendChild(style); shadow.appendChild(div); }

这个示例的关键函数是 updateStyle()——它接受一个元素，获取其影子根，找到它的元素，然后添加 width、height 和 background-color 到样式上。

实际的更新都是由生命周期回调处理的。connectedCallback() 每次将元素添加到 DOM 时都会运行一次——在这里，我们运行 updateStyle() 函数，以确保正方形的样式与其属性中定义的一致：

connectedCallback() { console.log("自定义正方形元素添加至页面。"); updateStyle(this); }

disconnectedCallback() 和 adoptedCallback() 回调在元素从 DOM 中移除或移动到不同页面时记录消息到控制台，以通知我们：

disconnectedCallback() { console.log("自定义正方形元素从页面中移除。"); } adoptedCallback() { console.log("自定义正方形元素移动至新页面。"); }

attributeChangedCallback() 回调在元素的属性以某种方式更改时运行。正如你从其参数中看到的那样，可以单独处理属性，查看它们的名称以及旧的和新的属性值。不过在这种情况下，我们只是再次运行 updateStyle() 函数，以确保正方形的样式根据新的值更新：

attributeChangedCallback(name, oldValue, newValue) { console.log("自定义正方形元素的属性已变更。"); updateStyle(this); }

请注意，要在属性更改时触发 attributeChangedCallback() 回调，必须观察这些属性。这通过在自定义元素类内指定一个 static get observedAttributes() 方法来实现——该方法应返回一个包含要观察的属性名称的数组：

static get observedAttributes() { return ["color", "size"]; }

【本文地址】

使用自定义元素

使用自定义元素

今日新闻

推荐新闻