元素的属性修改之后元素也应该响应相应的变化，所以我们需要实现自定义元素的属性变化。

实现自定义元素的属性变化需要在自定义类中添加如下两个内容：

添加一个名为observedAttributes的静态属性，它是一个数组，里面包含的是标签需要变更通知的所有的属性名称。添加attributeChangedCallback() 生命周期回调函数，实现属性变更的相关操作。

回调接受三个参数：发生变化的属性的名称、属性的旧值、属性的新值.

attributeChangedCallback() 在元素的首次声明解析时也会被调用。

eg：

// 为这个元素创建类

class MyCustomElement extends HTMLElement {

static observedAttributes = ["size"];

constructor() {

super();

}

attributeChangedCallback(name, oldValue, newValue) {

console.log(`属性 ${ name} 已由 ${ oldValue} 变更为 ${ newValue}。`);

}

}

customElements.define("my-custom-element", MyCustomElement);

自定义元素示例

定义独立自定义元素

定义元素js代码

// 为当这个元素创建一个类

class PopupInfo extends HTMLElement {

constructor() {

// 必须首先调用 super 方法

super();

}

connectedCallback() {

// 创建影子根

const shadow = this.attachShadow({ mode: "open" });

// 创建几个 span

const wrapper = document.createElement("span");

wrapper.setAttribute("class", "wrapper");

const icon = document.createElement("span");

icon.setAttribute("class", "icon");

icon.setAttribute("tabindex", 0);

const info = document.createElement("span");

info.setAttribute("class", "info");

// 获取属性内容然后将其放入 info 这个 span 内

const text = this.getAttribute("data-text");

info.textContent = text;

// 插入图标

let imgUrl;

if (this.hasAttribute("img")) {

imgUrl = this.getAttribute("img");

} else {

imgUrl = "img/default.png";

}

const img = document.createElement("img");

img.src = imgUrl;

icon.appendChild(img);

// 创建一些 CSS 应用于影子 DOM

const style = document.createElement("style");

console.log(style.isConnected);

style.textContent = `

.wrapper {

position: relative;

}

.info {

font-size: 0.8rem;

width: 200px;

display: inline-block;

border: 1px solid black;

padding: 10px;

background: white;

border-radius: 10px;

opacity: 0;

transition: 0.6s all;

position: absolute;

top: 20px;

left: 10px;

z-index: 3;

}

img {

width: 1.2rem;

}

.icon:hover + .info, .icon:focus + .info {

opacity: 1;

}

`;

// 将创建好的元素附加到影子 DOM 上

shadow.appendChild(style);

console.log(style.isConnected);

shadow.appendChild(wrapper);

wrapper.appendChild(icon);

wrapper.appendChild(info);

}

}

// 注册自定义元素

customElements.define("popup-info", PopupInfo);

在html中使用

<popup-info

img="图片icon地址"code>

data-text="悬浮显示的文字内容"></popup-info>code>

效果：

定义自定义内置元素

目标：扩展内置的 <code><ul> 元素，以支持展开和折叠列表项。

定义js代码：

// 为这个元素创建类

class ExpandingList extends HTMLUListElement {

constructor() {

// 必须首先调用 super 方法

// super() 的返回值是对当前元素的引用

self = super();

}

connectedCallback() {

// 获取当前自定义 ul 元素的 ul 和 li 子元素

// 包含 ul 的 li 元素可以成为容器

const uls = Array.from(self.querySelectorAll("ul"));

const lis = Array.from(self.querySelectorAll("li"));

// 隐藏所有子 ul

// 当用户点击更高级别的容器时，这些列表就会显示出来

uls.forEach((ul) => {

ul.style.display = "none";

});

// 仔细观察每个在 ul 中的 li 元素

lis.forEach((li) => {

// 如果这个 li 有一个 ul 作为子元素，则对其进行装饰并添加一个点击处理程序

if (li.querySelectorAll("ul").length > 0) {

// 添加一个属性，以便通过样式使用

// 来显示打开或关闭的图标

li.setAttribute("class", "closed");

// 将 li 元素的文本包裹在一个新的 span 元素中

// 这样我们就可以将样式和事件处理程序分配给 span

const childText = li.childNodes[0];

const newSpan = document.createElement("span");

// 从 li 复制文本到 span，设置光标样式

newSpan.textContent = childText.textContent;

newSpan.style.cursor = "pointer";

// 为这个 span 添加事件处理程序

newSpan.addEventListener("click", (e) => {

// span 的下一个兄弟元素应该是 ul

const nextul = e.target.nextElementSibling;

// 切换可见状态并更新 ul 的 class 属性

if (nextul.style.display == "block") {

nextul.style.display = "none";

nextul.parentNode.setAttribute("class", "closed");

} else {

nextul.style.display = "block";

nextul.parentNode.setAttribute("class", "open");

}

});

// 添加 span 并从 li 中移除纯文本节点

childText.parentNode.insertBefore(newSpan, childText);

childText.parentNode.removeChild(childText);

}

});

}

}

//注册元素

customElements.define("expanding-list", ExpandingList, { extends: "ul" });

html使用：

<ul is="expanding-list">code>

<li>

列表1

<ul is="expanding-list">code>

<li>

列表1的第一级子列表1-1

<ul is="expanding-list">code>

<li>

列表1的第二级子列表1-1-1

<ul is="expanding-list">code>

<li>列表1的第三级子列表1-1-1-1</li>

<li>列表1的第三级子列表1-1-1-2</li>

</ul>

</li>

<li>列表1的第二级子列表1-1-2</li>

</ul>

</li>

<li>

列表1的第一级子列表1-2

<ul is="expanding-list">code>

<li>列表1的第二级子列表1-2-1</li>

<li>列表1的第二级子列表1-2-2</li>

</ul>

</li>

</ul>

</li>

<li>列表2</li>

</ul>

效果：

使用影子Dom

其中隐藏的dom树是不能通过<code>document.querySelectorAll获取的，需要使用shadowRoot.querySelectorAll获取，同时我们可以设置开关来控制是否能够通过shadowRoot.querySelectorAll获取到元素（mode参数的设置），从而外界无法随意获取改变元素的效果。

如果我们将自定义的元素放置在隐藏的dom树中就可以实现保护的效果。我们需要通过影子Dom将自定义的元素放置在隐藏的dom树。

几个概念：

影子宿主（Shadow host）: 影子 DOM 附加到的常规 DOM 节点。影子树（Shadow tree）: 影子 DOM 内部的 DOM 树。影子边界（Shadow boundary）: 影子 DOM 终止，常规 DOM 开始的地方。影子根（Shadow root）: 影子树的根节点。

创建一个影子Dom

我们先不讨论自定义元素的情况，先理解普通元素在隐藏dom树的情况。

创建影子Dom的语法：影子宿主.attachShadow({ mode: "open" })

mode参数的作用：

当 mode 设置为 "open" 时，页面中的 JavaScript 可以通过影子宿主的 shadowRoot 属性访问影子 DOM 的内部。

当 mode 设置为 "closed" 时，页面中的 JavaScript 不能访问影子 DOM 的内部。

下例中将id为host的元素设置为影子宿主创建影子Dom：

<body>

<div id="host"></div>code>

<span>I'm not in the shadow DOM</span>

</body>

<script>

const host = document.querySelector("#host");

const shadow = host.attachShadow({ mode: "open" });

const span = document.createElement("span");

span.textContent = "I'm in the shadow DOM";

//添加为影子dom节点

shadow.appendChild(span);

</script>

js隔离

使用<code>document获取元素是不会获取到影子dom上的节点的。

添加如下js代码

const spans = Array.from(document.querySelectorAll("span"));

for (const span of spans) {

span.textContent = span.textContent.toUpperCase();

}

效果是只有标准Dom中的span元素变成大写：

使用<code>shadowRoot可以获取到影子Dom上的节点

语法：影子宿主.shadowRoot.获取元素节点的方法()

添加如下js代码

const spans = Array.from(host.shadowRoot.querySelectorAll("span"));

for (const span of spans) {

span.textContent = span.textContent.toUpperCase();

}

效果是只有影子Dom中的span元素变成大写：

阻止js获取影子Dom上的节点

创建影子Dom的时候只需要设置<code>{mode: "closed"}就可以，此时shadowRoot返回null。

css隔离

页面中的style样式对影子Dom中的节点是不起作用的。

页面中设置如下样式：

<style>

span {

color: rgb(173, 77, 77);

border: 1px solid black;

border-radius: 10px;

background: black;

padding: 2px 5px;

}

</style>

效果：

可以使用编程式或声明式的方法为影子Dom添加样式

编程式：通过构建一个 <code>CSSStyleSheet 对象并将其附加到影子根。

创建一个空的 CSSStyleSheet 对象

使用 CSSStyleSheet.replace() 或 CSSStyleSheet.replaceSync()设置其内容

通过将其赋给 ShadowRoot.adoptedStyleSheets来添加到影子根

const sheet = new CSSStyleSheet();

sheet.replaceSync("span { color: red; border: 2px dotted black;}");

shadow.adoptedStyleSheets = [sheet];

声明式

将一个影子Dom的 <style> 样式包含在 <template> 元素中添加到页面上。

然后将该 <template> 元素添加到影子Dom上。

<body>

<template id="my-element">code>

<style>

span {

color: red;

border: 2px dotted black;

}

</style>

</template>

</body>

<script>

const template = document.getElementById("my-element");

shadow.appendChild(template.content);

</script>

效果：

就像页面样式就像不会影响影子 DOM 中的元素一样，影子 DOM 样式也不会影响页面中其它元素的样式。

影子Dom和自定义元素

<code><body>

<filled-circle color="#d46b6b"></filled-circle>code>

</body>

<script>

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);

</script>

补充： 影子根ShadowRoot的相关属性和方法

host： <code>ShadowRoot.host，只读属性，返回对 ShadowRoot 所附加到的 DOM 元素的引用mode： ShadowRoot.mode，只读属性，返回其模式打开或关闭。activeElement ： Shadow.activeElement 只读属性，返回影子树中具有焦点的元素

等。

使用html模板

之前我们定义自定义元素的时候都是在js中编写对应的元素标签，这样写无疑是比较麻烦的，我们希望可以直接在html模板中编写对应的标签和样式，然后自定义组件直接用html模板中的标签定义自己的元素。

常见的使用方法有 <template> 和 <slot> 元素

template标签实现自定义元素

利用template标签不在页面中展示的效果实现自定义元素。

<template id="my-paragraph">code>

<p>My paragraph</p>

</template>

上面的代码不会展示在你的页面中，除非使用 JavaScript 获取它，然后添加到 DOM 中，如下面的代码：

let template = document.getElementById("my-paragraph");

let templateContent = template.content;

document.body.appendChild(templateContent);

因为template标签中的内容不会展示，自定义元素的时候就可以直接获取template标签中的内容使用，使用js将template标签的内容作为元素展示，并且不会影响其他内容的展示。

<body>

<template id="my-paragraph">code>

<style>

p {

color: white;

background-color: #666;

padding: 5px;

}

</style>

<p>My paragraph</p>

</template>

<my-paragraph></my-paragraph>

</body>

<script>

customElements.define(

"my-paragraph",

class extends HTMLElement {

constructor() {

super();

// 编写元素内容，这里采取将元素内容编写在html总然后直接获取插入的方法

let template = document.getElementById("my-paragraph");

let templateContent = template.content;

// 创建一个影子根

const shadowRoot = this.attachShadow({ mode: "open" });

// 使用 Node.cloneNode() 方法添加了模板的拷贝到阴影的根结点上

shadowRoot.appendChild(templateContent.cloneNode(true));

}

},

);

</script>

关键点是使用 Node.cloneNode() 方法添加了模板的拷贝到阴影的根结点上。

效果：

slots插槽实现自定义元素