資訊專欄INFORMATION COLUMN
摘要：通過創建元素時也有不同也可以直接調用構造函數創建注直到版本，擴展內置元素依然在開發中。自定義元素被移入新的時調用。
很早我們就可以在 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
上面的代碼依然正常工作。首先瀏覽器正常解析文檔，遇到