Question

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

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

所以我做了一个小测试，并编写了一个没有阴影dom的Web组件，看来我的组件使用的是Metronic样式很好，因此它是从包含它的父页面继承来的。

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

这时，我对如何处理这种情况还不确定：我不能简单地使用影子DOM，但是，我没有使用Web组件的全部功能和封装。

那么您将如何处理要与Web组件结合使用的大型Bootstrap模板的情况？这值得么？有针对这种情况的指南吗？

Answer 1

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

ShadowDOM旨在防止外部CSS影响内部ShadowDOM。因此，如果您想在ShadowDOM中使用特定的CSS，则必须将其放在此处。

最简单的方法是在ShadowDOM中包含rock < paper标签。您在组件外部使用的同一<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>，因此看不到更改。

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

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

1 个答案: