自定義元素包含自己的語義,行為,標記,可以跨框架和瀏覽器共享。
JS class MyComponent extends HTMLElement { connectedCallback() { this.innerHTML = `Hello world
`; } } customElements.define("my-component", MyComponent);
HTMlResult Hello world
在這個例子中,我們定義了
存在沒有第三方框架的自定義元素,瀏覽器供應商致力于規范的持續向后兼容性,除了保證根據規范編寫的組件不會破壞API更改。更重要的是,這些組件通常可以與現有最流行的框架一起使用,包括Angular,React,Vue等,只需要很少的工作量
Shadow DOMshadow DOM是DOM的封裝版本。這允許作者有效地將DOM片段彼此隔離,包括可以用作CSS選擇器的任何東西以及與它們相關聯的樣式。通常,文檔范圍內的任何內容都稱為light DOM,而shadow root中的任何內容都稱為shadow DOM。
使用light DOM時,可以使用document.querySelector("selector")或通過使用element.querySelector("selector")定位任何元素的子元素來選擇元素;以同樣的方式,可以通過調用shadowRoot.querySelector來定位影子根的子節點,其中shadowRoot是對文檔片段的引用 - 不同之處在于影子根的子節點不能從輕型DOM中選擇。例如,如果我們在其中有一個帶有
在這方面,影子DOM的工作類似于
如果您曾編寫過重用相同內容的組件或依賴于CSS-in-JS工具或CSS命名策略(如BEM),那么shadow DOM有可能改善您的開發人員體驗。
想象一下以下場景:
<#shadow-root> #shadow-root>
除了<#shadow-root>的偽代碼(此處用于劃分沒有HTML元素的陰影邊界),HTML完全有效。要將陰影根附加到上面的節點
類似于:
const shadowRoot = document.getElementById("example").attachShadow({ mode: "open" }); shadowRoot.innerHTML = ` `;HTML templates
HTML 元素允許我們在普通的HTML流程中刪除可重復使用的代碼模板,這些模板不會立即呈現,但可以在以后使用。
HTML—
上面的示例在腳本使用模板之前不會呈現任何內容,實例化后代碼將告訴瀏覽器如何處理它。
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); });
請注意,此示例在沒有任何其他Web組件技術的情況下創建模板(),再次說明堆棧中的三種技術可以多帶帶使用或共同使用。