将 bootstrap 模板与普通 Web 组件一起使用

Question

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

现在，我正在考虑使用原始 Web 组件方法重写此网站。

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

但是，当我启用阴影 DOM 时，CSS 传播停止，现在我的 Web 组件不再使用 Metronic 风格。

此时我有点不确定如何处理这种情况：我可以简单地不使用 shadow 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。

将 bootstrap 模板与普通 Web 组件一起使用

Using bootstrap template with vanilla web components

html

javascript

css

asp.net

web-component