02 Web 组件

Web 组件

• Web组件是指对 Web 的数据和方法进行封装实体，可以包含 JavaBean 组件，从而方便地进行业务逻辑的处理。

web组件的分类

• 

自定义元素

• 自定义元素是HTML元素，像<div>, <section> 或<article>，但是我们可以自己对通过浏览器API定义的元素进行命名。自定义元素就像那些标准的HTML元素一样——名称用尖括号括起来——只不过它们总是有一个破折号，比如<news-slider> 或 <bacon-cheeseburger>。展望未来，浏览器厂商已承诺不再创建新的包含一个破折号的内置元素，以防止冲突。
• 自定义元素包含自己的语义、行为、标记，可以跨框架和浏览器共享。

影子 DOM

• 影子DOM是DOM的一个封装版本。这允许作者有效地将DOM片段彼此隔离，包括可以用作CSS选择器的任何东西以及与它们关联的样式。通常，文档范围内的任何内容都称为 light DOM，影子根内的任何内容都称为影子DOM。
• 使用light DOM时，可以使用document.querySelector('selector')来选择元素，也可以使用element. queryselector ('selector')来选择任何元素的子元素；同样，可以通过调用shadowRoot.querySelector来锁定影子根的子节点,其中shadowRoot是对文档片段的引用——不同之处在于，影子根的子元素不能从light DOM中选择。例如，如果我们有一个包含<button>的影子根，调用shadowRoot.querySelector('button')将返回我们的按钮，但是没有一个文档查询选择器（document’s query selector）的调用会返回该元素，因为它属于另一个不同的DocumentOrShadowRoot实例。样式选择器也以同样的方式工作。
• 在这方面，影子DOM的工作方式有点像 <iframe>，它里边的内容会与文档的其他内容切割开；但是，当我们创建一个阴影根时，我们仍然可以完全控制页面的这一部分，但是范围仅限于上下文。这就是我们所说的封装。
• 如果你曾经编写过重用相同id，或者依赖于CSS-in- js工具或CSS命名策略(如BEM) 的组件，那么影子DOM有可能改善你的开发体验。

HTML模板

• HTML<template>元素允许我们在一个正常的HTML流中剔除可重用的代码模板，这些模板不会立即渲染，但是可以在稍后使用。

HTML导入

• 将HTML文档导入其他文档的声明方法。