自定义元素包含自己的语义,行为,标记,可以跨框架和浏览器共享。
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组件技术的情况下创建模板(),再次说明堆栈中的三种技术可以多带带使用或共同使用。