如何在不修改第三方元素的情况下替换::shadow

Question

我正在寻找一种方法来替换 ::shadow，现在它已经消失了。我在这个网站上找到了两个关于它的主题，但都暗示要修改阴影元素。 and

但是 Web Components 的意义在于能够将我们在 Internet 上找到的任何元素导入到我们的网页/应用程序中。所以，这意味着我不想在这些"third parties elements"上修改任何东西，因为有来源，如果我修改它们，我以后更新它们时它会被覆盖。

所以，假设我在 webcomponents.org 上下载了一个创建某种按钮的元素，但我需要更改此按钮的颜色，因为它不适合我的 page/app.元素创建者没有在他的 CSS 中放置任何变量，没有 @apply 规则，没有导入，什么都没有。只是聚合物元件本身，正常工作。

如何在不修改元素源代码的情况下执行此操作？

Answer 1

一种选择是强制设置样式。获取对该元素的引用，使用其上的 DOM API 查询其影子 DOM 以获取您要修改的内部元素，然后设置 style 属性该参考资料。

例如，<gold-cc-cvc-input> 目前没有用于设置其信用卡图标样式的扩展点。

Right-click Chrome 中的图标，并在 DevTools 中检查它。我们看到图标的 id 为 "icon"。
获取对<gold-cc-cvc-input id="cvc">的引用，并设置"icon"元素的style。在这里，我们使用 Polymer 的 automatic node finding 通过其 ID（即 this.$.cvc）获取对 <gold-cc-cvc-input> 的引用，然后是对内部 "icon" 元素（即, this.$.cvc.$.icon).
```
this.$.cvc.$.icon.style.border = 'solid 2px blue';
```

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    attached: function() {
      this.$.cvc.$.icon.style.border = 'solid 2px blue';
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="gold-cc-cvc-input/gold-cc-cvc-input.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <gold-cc-cvc-input id="cvc"></gold-cc-cvc-input>
    </template>
  </dom-module>
</body>

codepen

Answer 2

您可以从您的容器元素中设置样式，只需查看第 3 方元素的结构即可。例如，<paper-card> 是您要设置样式的元素。 paper-cards 里面有 div:
阴暗的 DOM（聚合物 1.*）

<style>
  paper-card div{
    background-color: red;
    padding: 30px;
  }
</style>

<head>
  <base href="https://polygit.org/polymer+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="paper-card/paper-card.html">
  <style>
    .thirdPartEl div{
      background-color: red;
      padding: 30px;
    }
  </style>
</head>
<body>
  <paper-card heading="I'm unstyled 3rd parties element"></paper-card>
  <paper-card class="thirdPartEl" heading="I'm styled 3rd parties element"></paper-card>
</body>

阴影 DOM（聚合物 2.0）
对于来自外部的样式元素，只需使用标签名称作为选择器

<style>
  paper-card{
    background-color: red;
    padding: 30px;
  }
</style>

但如果您想要设置内部样式，则需要自定义 CSS 属性。如果这些没有设置，你现在只能通过 js 来设置它们的样式

如何在不修改第三方元素的情况下替换::shadow

How to replace ::shadow without modifying the third-party element

css

shadow-dom

polymer-1.0