自定義元素包含自己的語(yǔ)義,行為,標(biāo)記,可以跨框架和瀏覽器共享。
JS class MyComponent extends HTMLElement { connectedCallback() { this.innerHTML = `Hello world
`; } } customElements.define("my-component", MyComponent);
HTMlResult Hello world
在這個(gè)例子中,我們定義了
存在沒(méi)有第三方框架的自定義元素,瀏覽器供應(yīng)商致力于規(guī)范的持續(xù)向后兼容性,除了保證根據(jù)規(guī)范編寫(xiě)的組件不會(huì)破壞API更改。更重要的是,這些組件通常可以與現(xiàn)有最流行的框架一起使用,包括Angular,React,Vue等,只需要很少的工作量
Shadow DOMshadow DOM是DOM的封裝版本。這允許作者有效地將DOM片段彼此隔離,包括可以用作CSS選擇器的任何東西以及與它們相關(guān)聯(lián)的樣式。通常,文檔范圍內(nèi)的任何內(nèi)容都稱(chēng)為light DOM,而shadow root中的任何內(nèi)容都稱(chēng)為shadow DOM。
使用light DOM時(shí),可以使用document.querySelector("selector")或通過(guò)使用element.querySelector("selector")定位任何元素的子元素來(lái)選擇元素;以同樣的方式,可以通過(guò)調(diào)用shadowRoot.querySelector來(lái)定位影子根的子節(jié)點(diǎn),其中shadowRoot是對(duì)文檔片段的引用 - 不同之處在于影子根的子節(jié)點(diǎn)不能從輕型DOM中選擇。例如,如果我們?cè)谄渲杏幸粋€(gè)帶有
在這方面,影子DOM的工作類(lèi)似于
如果您曾編寫(xiě)過(guò)重用相同內(nèi)容的組件或依賴(lài)于CSS-in-JS工具或CSS命名策略(如BEM),那么shadow DOM有可能改善您的開(kāi)發(fā)人員體驗(yàn)。
想象一下以下場(chǎng)景:
<#shadow-root> #shadow-root>
除了<#shadow-root>的偽代碼(此處用于劃分沒(méi)有HTML元素的陰影邊界),HTML完全有效。要將陰影根附加到上面的節(jié)點(diǎn)
類(lèi)似于:
const shadowRoot = document.getElementById("example").attachShadow({ mode: "open" }); shadowRoot.innerHTML = ` `;HTML templates
HTML 元素允許我們?cè)谄胀ǖ腍TML流程中刪除可重復(fù)使用的代碼模板,這些模板不會(huì)立即呈現(xiàn),但可以在以后使用。
HTML—
上面的示例在腳本使用模板之前不會(huì)呈現(xiàn)任何內(nèi)容,實(shí)例化后代碼將告訴瀏覽器如何處理它。
JS const fragment = document.getElementById("book-template"); const books = [ { title: "The Great Gatsby", author: "F. Scott Fitzgerald" }, { title: "A Farewell to Arms", author: "Ernest Hemingway" }, { title: "Catch 22", author: "Joseph Heller" } ]; books.forEach(book => { // Create an instance of the template content const instance = document.importNode(fragment.content, true); // Add relevant content to the template instance.querySelector(".title").innerHTML = book.title; instance.querySelector(".author").innerHTML = book.author; // Append the instance ot the DOM document.getElementById("books").appendChild(instance); });
請(qǐng)注意,此示例在沒(méi)有任何其他Web組件技術(shù)的情況下創(chuàng)建模板(),再次說(shuō)明堆棧中的三種技術(shù)可以多帶帶使用或共同使用。