JavaScript 知识量：26 - 101 - 483
HTML模板（<template>标签）是HTML5中引入的一个新元素，它允许开发者在HTML中定义片段，但不会在页面加载时渲染它们。相反，这些模板会被浏览器解析并存储为DOM子树，但不会进行渲染。这样，当需要渲染这些模板时，浏览器可以快速地将它们转换为DOM节点，而无需再次解析或重新渲染。
HTML模板的基本用法如下：
<template id="myTemplate"> <div> <h1>Welcome to my website!</h1> <p>This is a paragraph.</p> </div> </template>
然后，可以使用JavaScript获取模板，并使用它来创建新的DOM节点：
const template = document.getElementById('myTemplate');
const newElement = document.importNode(template.content, true);
document.body.appendChild(newElement);在这个例子中，document.importNode()方法被用来复制模板的内容，并创建一个新的DOM节点。然后，这个新节点被添加到页面的body中。注意，虽然模板被加载并解析为DOM子树，但并没有被渲染。只有使用document.importNode()方法创建新的DOM节点并添加到页面中时，模板才会被渲染。
影子DOM（Shadow DOM）是一种Web组件技术，它允许开发者将一个完整的DOM树作为节点添加到父DOM树中，实现DOM的封装。这样，CSS样式和CSS选择符可以被限制在影子DOM子树而不是整个顶级DOM树中。
影子DOM是一种类似于HTML模板的结构，但它们之间存在一些区别。首先，影子DOM的内容会被实际渲染到页面上，而HTML模板的内容在页面加载时不会被渲染出来。
其次，影子DOM允许开发者将DOM节点添加到父DOM树中，这样可以实现DOM的封装和组件化。而HTML模板则需要在页面加载时将模板内容插入到DOM中，它们不会自动添加到父DOM树中。
此外，影子DOM还可以通过自定义元素（Custom Elements）进行扩展和定制，使得开发者可以创建自己的Web组件，并使用JavaScript和CSS样式来自定义元素的行为和外观。
以下是一个简单的影子DOM示例：
<!DOCTYPE html>
<html>
<head>
<title>Shadow DOM Example</title>
</head>
<body>
<div id="host">
<p>Host Text</p>
</div>
<script>
const host = document.querySelector('#host');
const shadow = host.attachShadow({ mode: 'open' });
const span = document.createElement('span');
span.textContent = 'Shadow Text';
shadow.appendChild(span);
</script>
</body>
</html>在这个例子中，首先选择了一个具有id "host"的div元素，然后使用 attachShadow() 方法创建一个影子DOM树，并将其附加到 "host" div元素上。通过 mode: 'open' 参数来指定影子DOM是开放的，这意味着它可以被访问和操作。
接下来，创建一个新的span元素，并将其文本内容设置为 "Shadow Text"。最后，使用 appendChild() 方法将span元素添加到影子DOM树中。这样，当页面被渲染时， "host" div元素下的文本内容将显示为 "Host Text"，而影子DOM树中的内容将不会显示。但是，可以使用JavaScript来访问和操作影子DOM树中的元素。
自定义元素是HTML5中引入的一项功能，它允许开发者创建自己的HTML元素。这项功能在JavaScript框架中得到了广泛的应用，因为框架可以提供创建和管理自定义元素的工具和API。
自定义元素的工作方式基于Web组件规范，它使得开发者可以创建自定义的HTML元素，这些元素可以像其他HTML元素一样在页面中使用，并且具有自己的行为和功能。
要创建自定义元素，需要使用 class 关键字定义一个类，并在类中继承 HTMLElement 对象。例如：
class MyElement extends HTMLElement {
constructor() {
super();
// 初始化元素
}
}然后，可以使用 customElements.define() 方法将自定义元素添加到浏览器中，如下所示：
customElements.define('my-element', MyElement);在这个例子中，创建了一个名为 "my-element" 的自定义元素，并将 MyElement 类与这个元素关联起来。现在，可以在HTML中使用这个自定义元素，如下所示：
<my-element></my-element>
自定义元素可以具有自己的属性和方法，并且可以响应DOM属性和方法的更改。例如，可以在自定义元素中定义一个名为 attributeChangedCallback 的方法来处理属性更改事件：
class MyElement extends HTMLElement {
constructor() {
super();
// 初始化元素
}
attributeChangedCallback(name, oldValue, newValue) {
// 处理属性更改事件
}
}在上面的例子中，定义了一个名为 attributeChangedCallback 的方法来处理属性更改事件。当元素的属性发生变化时，这个方法将被调用，并传递属性的名称、旧值和新值作为参数。这样，就可以在方法中实现自定义的逻辑来响应属性更改事件。
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6