使用带有香草 Web 组件的引导模板

Question

我有一个使用 Metronic Bootstrap 模板的传统 ASP.NET MVC 网站。

现在，我正在考虑使用 vanilla web components 方法重写这个网站。

所以我做了一个小测试，写了一个没有shadow dom的web组件，看起来我的组件只是使用了Metronic风格，所以它从我包含它的父页面继承了它。

但是，当我启用 shadow DOM 时，CSS 传播停止，现在我的 Web 组件不再使用 Metronic 样式。

此时我有点不确定如何处理这种情况：我可以根本不使用影子 DOM，但是，我没有使用 Web 组件的全部强度和封装。

那么，如果您有一个想要使用的大型 Bootstrap 模板并结合 Web 组件，您将如何处理呢？这值得么？有针对这种情况的指导方针吗？

Answer 1

如果您需要在基于 ShadowDOM 的 Web 组件中使用大型 CSS 框架，那么您需要在每个组件中包含该 CSS，或者至少包含该组件所需的 CSS 部分。

ShadowDOM 旨在防止外部 CSS 影响内部 ShadowDOM。所以，如果你想在 ShadowDOM 中使用特定的 CSS，那么你必须把它放在那里。

最简单的做法是在 ShadowDOM 中包含 <link> 标签。您在组件之外使用的相同 <link> 标记。

class MyElement extends HTMLElement {
  constructor() {
    super();
    let shadow = this.attachShadow({mode: 'open'});
    shadow.innerHTML = `
    <link href="my.css" rel="stylesheet">
    <h2 class="my-header">My Component</h2>
    <button class="my-button">Pay me</button>`;
  }
}

customElements.define('my-element', MyElement);

<link href="my.css" rel="stylesheet">
<div class="my-thing">Stuff</div>
<button class="my-button">Click me</button>
<hr/>
<my-element></my-element>

由于我没有文件 my.css，因此您不会看到更改。

这将允许您在页面和组件中包含 CSS。