无框架 Web 组件

什么是 Web 组件？

Web Component 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的 web 应用中使用它们。不需要需要任何外部库来工作。

特征

• Custom elements（自定义元素）
• Shadow DOM（影子 DOM）
• HTML templates（HTML 模板）
• HTML Import 允许导入的外部 HTML 文档。

Web 组件是如何工作的

我们经常使用的 HTML5 和 元素，它们允许用户使用一系列内部按钮和控件播放、暂停、回放和快进媒体。默认情况下，浏览器处理布局、样式和功能。

Web 组件允许您添加自己的 HTML 自定义元素。元素名称必须包含连字符（-），以确保它不会与正式 HTML 元素冲突。

然后为您的自定义元素注册一个 ES6 类（class）。它可以附加 DOM 元素，如按钮、标题、段落等。为了确保这些元素不会与页面的其余部分冲突，您可以将它们附加到具有自己范围样式的内部 Shadow DOM。您可以将其视为迷你版