Question

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

但Web Components的重点是能够在我们的网页/应用程序中导入我们在互联网上找到的任何元素。所以，这意味着我不想修改这些“第三方元素”的任何内容，因为有来源，如果我修改它们，当我稍后更新它们时它将被覆盖。

所以，想象一下，我在webcomponents.org上下载了一个创建某种按钮的元素，但我需要更改此按钮的颜色，因为它不符合我的页面/应用程序的样式。元素创建者在他的CSS中没有变量，没有@apply规则，没有导入，没有。只是聚合物元素本身，正常工作。

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

Answer 1

一种选择是强制定型。获取对元素的引用，使用它上面的DOM API来查询它想要修改的内部元素的shadow DOM，然后设置该引用的style属性。

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

右键单击Chrome中的图标，然后在DevTools中进行检查。我们看到图标中有id＆＃34;图标＆＃34;。
获取对<gold-cc-cvc-input id="cvc">的引用，并设置＆＃34;图标＆＃34;的style元件。在这里，我们使用Polymer automatic node finding通过其ID（即<gold-cc-cvc-input>）获取this.$.cvc的引用，然后引用内部＆＃{ 34;图标＆＃34;元素（即this.$.cvc.$.icon）。
```
this.$.cvc.$.icon.style.border = 'solid 2px blue';
```

＆＃13;

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

＆＃13;

<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>

＆＃13;

codepen

Answer 2

您可以从容器元素设置样式，只需查看第三方元素的结构。例如，<paper-card>是您要设计的元素。纸卡内有div：
shady DOM（聚合物1. *）

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

＆＃13;

<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>

＆＃13;

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

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

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

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

2 个答案: