資訊專欄INFORMATION COLUMN
摘要：通過創(chuàng)建元素時(shí)也有不同也可以直接調(diào)用構(gòu)造函數(shù)創(chuàng)建注直到版本，擴(kuò)展內(nèi)置元素依然在開發(fā)中。自定義元素被移入新的時(shí)調(diào)用。
很早我們就可以在 HTML 文檔中寫
通過瀏覽器提供的 Custom elements api 我們能定義一個(gè)自定義元素，并且告知 HTML 解析器如何正確地構(gòu)造一個(gè)元素，以及在該元素的屬性變化時(shí)執(zhí)行相應(yīng)的處理。
定義新元素比如我們想要像
首先我們定義一個(gè)類 DateString 派生自 HTMLElement。
class DateString extends HTMLElement {
constructor() {
super()
return
}
// 返回需要監(jiān)聽的屬性，當(dāng)屬性值改變的時(shí)候會(huì)調(diào)用 attributeChangedCallback 這個(gè)方法
static get observedAttributes () {
return ["ln"]
}
attributeChangedCallback (name, oldValue, newValue) {
this.updateRendering (newValue)
}
// 元素插入到文檔中時(shí)調(diào)用
connectedCallback() {
const ln = this.getAttribute("ln")
this.updateRendering(ln)
}
// 元素從文檔中移除時(shí)調(diào)用
disconnectedCallback () {
window.clearInterval(this.interval)
}
updateRendering (ln = "zh") {
// 一個(gè)比較好的實(shí)踐就是在渲染時(shí)，檢查元素的 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)
}
}
然后調(diào)用 customElements.define() 注冊(cè)這個(gè)自定義元素，設(shè)置屬性并插入到 body 中。
customElements.define("date-string", DateString)
const dateStr = document.createElement("date-string")
dateStr.setAttribute("ln", "zh")
document.body.appendChild(dateStr)
也可以用直接調(diào)用構(gòu)造函數(shù)創(chuàng)建元素
const dateStr = new DateString()
dateStr.setAttribute("ln", "zh")
document.body.appendChild(dateStr)
自定義元素可以使用符合規(guī)范的任意屬性名，下面說的派生內(nèi)置元素類型要自定義屬性，則要用 data-*
上面代碼那樣設(shè)置屬性很繁瑣，我們可以做一個(gè)屬性映射，以期望 dateStr.ln = "zh" 這樣賦值
class DateString extends HTMLElement {
...
get ln () {
return this.getAttribute("ln")
}
set ln (value) {
this.setAttribute("ln", value)
}
}
元素升級(jí)
除了像上面那樣用 JavaScript 代碼創(chuàng)建元素并添加到 body 下面，也可以直接在 HTML 寫自定義元素
Document
上面的代碼依然正常工作。首先瀏覽器正常解析文檔，遇到