如何使用Shadow dom封装Web组件？

如何使用Shadow dom封装Web组件？

使用Shadow Dom在Web组件中封装

Shadow Dom是创建真正封装的Web组件的关键部分。它允许您从页面的其余部分封装组件的内部结构（HTML，CSS和JavaScript）。这样可以防止样式冲突和意外的副作用。您可以通过在元素上使用attachShadow()方法创建阴影DOM。此方法将可选的ShadowRootInit对象作为参数，它允许您指定阴影DOM的模式。这两种模式是：

• 'open' （默认）：主文档的样式可能会影响阴影dom，反之亦然。这提供了更大的灵活性，但减少了封装。
• 'closed' ：主文档的样式不会影响阴影DOM，反之亦然。这提供了更强的封装，防止风格出血和意外替代。

这是用Shadow dom创建Web组件的示例：

 <code class="javascript">class MyComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'closed' }); // Use 'open' if needed // Create internal HTML const div = document.createElement('div'); div.innerHTML = ` <style> :host { display: block; border: 1px solid black; } p { color: blue; } </style> <p>This is my component!</p> `; this.shadowRoot.appendChild(div); } } customElements.define('my-component', MyComponent);</code>

此代码定义了自定义元素my-component 。 attachShadow()方法创建了阴影DOM，并且内部HTML（包括样式）被添加到其中。 :host伪选择器允许您为自定义元素本身设计样式。因为我们使用了mode: 'closed' ，所以主页的样式不会影响该组件的外观。

与其他封装技术相比，使用Shadow DOM有什么好处？

阴影DOM比其他封装技术的好处

与其他封装技术相比，例如使用唯一的CSS类名称或JavaScript名称空间，Shadow dom提供了几个关键优势：

• 更强的封装： Shadow Dom提供了更强大的封装形式。它完全将组件的内部样式和HTML与页面的其余部分隔离，以防止意外样式冲突并确保可预测的行为。这比依靠独特的班级名称要好得多，这些名称仍然可以意外地覆盖或受级联样式影响。
• 可维护性的提高：由于其强大的封装，Shadow dom使维护和更新组件变得更加容易。组件内的变化不太可能对应用程序的其他部分产生意外后果。
• 可重用性：阴影DOM的包封的性质使组件在不同的项目和上下文中都可以重复使用。您可以自信地使用组件，而不必担心样式冲突或意外行为。
• 改进的性能（在某些情况下）：浏览器可以比其他技术更有效地优化阴影DOM组件的渲染。这可能会导致性能的提高，尤其是在复杂的应用中。
• 本机浏览器支持： Shadow DOM是本机浏览器功能，比使用解决方法或库的兼容性和更好的性能。

如何在不影响网页的其他部分的情况下有效地使用Shadow Dom进行样式组件？

带有阴影圆顶的造型组件有效

Shadow dom中的样式组件很简单，但需要了解:host伪选择器和CSS范围范围的工作。

• 内部样式表：最常见和推荐的方法是使用<style></style>标签直接将样式直接嵌入组件的阴影DOM中。这可以使样式保持本地化并防止冲突。
• :host伪selector：此伪选择器针对自定义元素本身，从而使您可以从阴影DOM内部对主机元素进行样式。
• Scoped CSS：由于Shadow Dom的封装，Shadow Dom中的样式不会影响主文档，而反之亦然（以“封闭”模式）。这消除了对复杂的班级名称方案的需求，以防止样式冲突。
• CSS变量（自定义属性）：使用CSS变量将样式从外部传递到阴影DOM。这允许在不损害封装的情况下进行一定程度的自定义。

使用内部样式表和:host ：

 <code class="html"><my-component style="--my-color: red;"></my-component> <style> my-component { /* styles applied to the outside of the shadow root */ } my-component::part(my-part) { /* styles applied to a specific part inside the shadow root */ } </style></code>

 <code class="javascript">class MyComponent extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); // or 'closed' this.shadowRoot.innerHTML = ` <style> :host { display: block; border: 1px solid var(--my-color, black); /* Default to black if not specified */ } p { color: blue; } </style> <p>This is my component!</p> `; } }</code>

此示例演示了如何使用CSS变量（ --my-color ）从外部自定义边框颜色。默认颜色是黑色的。

我可以从外部访问和操纵元素，如果是的话，如何？

从外部访问和操纵阴影元素

通常不建议您直接访问和操纵阴影DOM内的元素，因为它会破坏封装并可能导致脆弱的代码。但是，在某些情况下可能有必要。这里有几种方法：

• 使用querySelector和querySelectorAll ：如果您知道阴影DOM中元素的选择器，则可以使用这些方法访问它。但是，这很脆弱，因为内部结构的变化可能会破坏您的代码。需要在shadowRoot属性上调用querySelector方法。
• 使用shadowRoot属性：如果您有对自定义元素的引用，则可以访问其shadowRoot属性以穿越阴影DOM。
• 公开API：最好的做法是在Web组件中创建公共方法或属性，以以受控方式进行外部交互。这保持封装并允许可预测的行为。

使用querySelector访问元素的示例：

 <code class="javascript">const myComponent = document.querySelector('my-component'); const paragraph = myComponent.shadowRoot.querySelector('p'); paragraph.textContent = 'This text has been changed from the outside!';</code>

此示例直接访问阴影DOM中的<p></p>元素。但是，这通常是灰心的。最好在MyComponent类中公开一种方法，该方法允许以受控且可维护的方式更新文本。例如：

 <code class="javascript">class MyComponent extends HTMLElement { // ... (constructor as before) ... set textContent(newText) { this.shadowRoot.querySelector('p').textContent = newText; } }</code>

现在，您可以使用： myComponent.textContent = "New text";
这种方法保持封装并使您的代码更加稳健。

以上是如何使用Shadow dom封装Web组件？的详细内容。更多信息请关注PHP中文网其他相关文章！