Web 组件和聚合物 2.0 入门—第 1 部分
Web 组件和聚合物 2.0 入门—第 1 部分
你听说过大教堂。大多数时候你会听到不好的事情。DOM 遍历慢！DOM 操作代价很大！DOM API 一塌糊涂！诚然，DOM 受到了负面的报道，但是当我们退一步冷静下来，我们意识到 DOM 是我们作为 web 开发人员所做的事情中最关键的部分，并且我们努力理解它是至关重要的。
D OM 或文档对象模型是声明性 HTML 标记的对象图表示。每个 HTML 标签都在内部被转换成一个对象。例如，一个简单的< div >被转换成 HTMLDivElement，或者一个< span >被转换成 HTMLSpanElement。当解析器运行时，它知道根据遇到的标记实例化哪个对象。本质上，每个 HTML 标签都由一个类支持。
我们知道一些 HTML 元素封装了它们的表示。一个例子是< h1 >标签。我们知道，无论我们在< h1 >标签中包含什么文本，它的字体大小都是 2em，字体粗细是粗体，显示块是块。一些元素采用属性，这些属性决定了一些行为。一个例子是<一个>标签，它带有一个“href”属性，允许我们链接到一个不同的页面。这种封装表示和行为的能力是通过浏览器的内部 API 实现的，这些 API 用于实现不同类型的元素。
输入 web 组件。 Web 组件是浏览器公开的一组低级 API，因此它们可用于开发封装表示逻辑和行为逻辑的定制元素。由于 web 组件 API 是浏览器固有的，所以这些定制元素可以在支持 web 组件规范的浏览器上固有地自由运行框架和库。
Web 组件主要由 4 个功能组成:
- 自定义元素
- 阴影 DOM
- HTML 导入
- HTML 模板
让我们更深入地了解这些特性中的每一个，以及您期待已久的部分…代码！
自定义元素
定制元素允许新的 HTML 标签被实现。自定义元素可以从现有的自定义元素扩展而来。它们可以像任何 HTML 标签一样被放入和使用。它们可以通过使用 web 开发的基本构建块来创建——html、css 和 javascript。
创建定制元素最简单的方法是扩展 HTMLElement 并注册浏览器词汇表的元素部分。
该元素现在可以像任何其他 HTML 标记一样简单地使用。
<name-tag></name-tag>然而，我们看不出有什么不同。这是因为没有为此自定义元素定义实现。让我们把那个加进去。
现在，如果我们只使用
This is a custom element让我们的元素变得更聪明一点。要使自定义元素可用，它必须有一个公共 API，通过该 API 可以向元素提供属性，这些属性将指示组件如何呈现。让我们实现这个行为，目的是我们将使用像
现在，我们不仅可以使用该元素，就像该元素是 HTML 标准词汇表的一部分一样，例如
让我们总结一下定制元素的工作流程:
- 创建了一个类，它扩展了 HTMLElement 类。这告诉浏览器将自定义元素视为 HTML 元素。
- 决定将传递给元素的属性或属性。通过从 observedAttributes 静态方法返回属性名称列表，决定哪些属性可以改变并公开它们。
- 我们期望传递给元素的属性或属性作为局部变量存储在类的构造函数中。
- 实现attributechangedcallback方法，该方法在每次观察列表中的属性改变时被调用。该方法用于调用属性设置器。attributeChangedCallback 是定制元素附带的几个生命周期挂钩的一部分。
- 为属性定义简单的ES6 getter 和 setter，它们设置本地属性值并执行一些呈现逻辑，例如设置 innerHTML。
如果您已经完成了，那么您已经创建了您的第一个定制元素。正如承诺的那样，该元素将在任何兼容 web 组件的浏览器上自然工作。我们将在以后的文章中讨论如何发布定制元素。
我们将回到自定义元素，因为帖子是要建立在彼此之上的。请继续关注第二部，我们将会看到暗影 DOM 。
黑客中午是黑客如何开始他们的下午。我们是 @AMI 家庭的一员。我们现在接受投稿，并乐意讨论广告&赞助机会。
要了解更多信息，请阅读我们的“关于”页面、在脸书上点赞/给我们发消息，或者简单地说， tweet/DM @HackerNoon。