摘要：通过创建元素时也有不同也可以直接调用构造函数创建注直到版本，扩展内置元素依然在开发中。自定义元素被移入新的时调用。
很早我们就可以在 HTML 文档中写
通过浏览器提供的 Custom elements api 我们能定义一个自定义元素，并且告知 HTML 解析器如何正确地构造一个元素，以及在该元素的属性变化时执行相应的处理。
定义新元素比如我们想要像
首先我们定义一个类 DateString 派生自 HTMLElement。
class DateString extends HTMLElement {
constructor() {
super()
return
}
// 返回需要监听的属性，当属性值改变的时候会调用 attributeChangedCallback 这个方法
static get observedAttributes () {
return ["ln"]
}
attributeChangedCallback (name, oldValue, newValue) {
this.updateRendering (newValue)
}
// 元素插入到文档中时调用
connectedCallback() {
const ln = this.getAttribute("ln")
this.updateRendering(ln)
}
// 元素从文档中移除时调用
disconnectedCallback () {
window.clearInterval(this.interval)
}
updateRendering (ln = "zh") {
// 一个比较好的实践就是在渲染时，检查元素的 ownerDocument.defaultView, 如果不存在则什么都不干
if (!this.ownerDocument.defaultView) {
return
}
if (this.interval) {
window.clearInterval(this.interval)
}
this.interval = setInterval(() => {
if (ln === "zh") {
this.innerHTML = new Date().toLocaleString()
} else {
this.innerHTML = new Date().toString()
}
}, 1000)
}
}
然后调用 customElements.define() 注册这个自定义元素，设置属性并插入到 body 中。
customElements.define("date-string", DateString)
const dateStr = document.createElement("date-string")
dateStr.setAttribute("ln", "zh")
document.body.appendChild(dateStr)
也可以用直接调用构造函数创建元素
const dateStr = new DateString()
dateStr.setAttribute("ln", "zh")
document.body.appendChild(dateStr)
自定义元素可以使用符合规范的任意属性名，下面说的派生内置元素类型要自定义属性，则要用 data-*
上面代码那样设置属性很繁琐，我们可以做一个属性映射，以期望 dateStr.ln = "zh" 这样赋值
class DateString extends HTMLElement {
...
get ln () {
return this.getAttribute("ln")
}
set ln (value) {
this.setAttribute("ln", value)
}
}
元素升级
除了像上面那样用 JavaScript 代码创建元素并添加到 body 下面，也可以直接在 HTML 写自定义元素
Document
上面的代码依然正常工作。首先浏览器正常解析文档，遇到