将引导模板与 vanilla Web 组件一起使用

Question

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

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

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

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

目前我对如何处理这种情况有点不确定：我不能简单地使用 shadow DOM，但是，我没有使用 web 组件的全部强度和封装。

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

Answer 1

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

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

最简单的做法是<link>在 ShadowDOM 中包含该标签。<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。