Web 组件背后的动机

mstmahmuda11121

首先，我们使用 :host 选择器和 CSS 变量。这里我们已经有点超前了，因为这个选择器选择了影子主机，我们只有在创建 Shadow DOM 时才能获得它。说白了，这就是选择 HTML 标签 my-counter 本身。我们通过 CSS 激活 Flexbox 并设置一个名为 的 CSS 变量 --button-square-size。然后我们使用这个变量来设计我们的元素。所以我们得到了一个对开发人员非常友好的组件。 图：HTML 模板 图：HTML 模板 要创建模板的实例，我们可以将其分配给我们的 Web 组件作为测试。为此，我们需要在 super 调用之后立即在构造函数中添加以下代码我们只需从模板中克隆内容并将其作为子组件添加到我们的组件中。 true 表示应该进行 DeepClone，即任何内容实际上都会被复制。 如果我们查看当前的中间状态，我们的组件实际上看起来并不像计数器（图 2）。


图：目前的临时状态 这只是因为我们尝试通过 CSS 选择影子主机，但它还不存在。下一步我们想要 瑞士 电话号码 改变这一点！ 3.默认：Shadow DOM 通过最后一个标准，我们可以将之前的组件更改为真正的 Web 组件。我们唯一需要做的就是改变从模板克隆的方式。因此，我们将之前的构造函数替换为以下构造函数首先我们使用 AttachShadow 创建一个Shadow DOM。该模式指定是否可以从外部访问每个 HTML 元素都具有的 ShadowRoot 属性。我们可以使用开放模式访问该属性。如果我们使用关闭模式，浏览器在访问 ShadowRoot 属性时总是返回 null，即使在我们的组件内也是如此！这也是我们将方法调用的结果存储在 Shadow 属性中的原因，以便无论模式如何，我们始终可以访问 Shadow DOM。




在下一步中，我们不会将模板的副本作为子组件直接插入组件中，而是作为 Shadow DOM 的子组件。如果现在在浏览器中查看结果，我们可以看到组件的实际外观（图 3）。在 DevTools 中，我们还看到我们的组件有一个 #shadow 根（打开），CSS 选择器 :host 也被应用，因为 my-counter 标签代表影子主机。 顺便说一句，如果您无法使用小的解决方法访问封闭的影子 DOM，那么 JavaScript 就不是 JavaScript。但是，应尽可能避免，以免产生不必要的副作用。 图 3：Shadow DOM 组件的当前状态 - Host Europe 博客中的文章 Web Components 图：Shadow DOM 组件的当前状态 到目前为止，一切都很好！我们开发了第一个 Web 组件。然而，她还不能做太多事情，因为我们还没有给她注入生命。