javascript - 覆盖 Web 组件的内联 css

Question

在我们的网页上，我们有一个空的 div，它是通过 webcomponent 的 javascript 填充的。 这是一份第三方的医学问卷。

当 div 被填充时，有一个名为

的元素

#shadow-root (open).

在这个元素里面首先有一个样式元素，比如

<style scope="something">

然后是问题的 html。 我们想更改网页 css 文件中的一些样式，例如颜色和字体大小。

我们如何覆盖/否决我们自己的 css 文件中的样式？

我们尝试过类似的东西

:host .caption {font-size: 12px; }
:host() .caption {font-size: 12px; }
:host(.caption) {font-size: 12px; }
.ourdiv .caption {font-size: 12px; }
.theirdiv .caption {font-size: 12px; }

有很多网站都在解释如何制作 web 组件，但没有关于如何否决/覆盖样式的内容。

Answer 1

你去过吗here ？

这里对shadow DOM有很深的解释。以下是对您重要的内容。

#shadow-root
  <style>
    #panels {
      box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
      background: white;
      ...
    }
    #tabs {
      display: inline-flex;
      ...
    }
  </style>
  <div id="tabs">
    ...
  </div>
  <div id="panels">
    ...
  </div>

shadow roots 元素中的样式将设置元素的样式。

样式表也限定在影子树中:

#shadow-root
  <link rel="stylesheet" href="styles.css">
  <div id="tabs">
    ...
  </div>
  <div id="panels">
    ...
  </div>