我正在寻找一种方法来替换 ::shadow，因为它已经消失了。我在这个网站上找到了两个关于它的主题，但都暗示要修改阴影元素。
here 和 there
但是 Web Components 的重点是能够将我们在 Internet 上找到的任何元素导入到我们的网页/应用程序中。所以，这意味着我不想修改这些“第三方元素”上的任何东西，因为有来源，如果我修改它们，我以后更新它们时会被覆盖。
所以，假设我在webcomponents.org 上下载了一个创建某种按钮的元素，但我需要更改此按钮的颜色，因为它不适合我的页面/应用程序的样式。元素创建者没有在他的 CSS 中放置任何变量，没有 @apply 规则，没有导入，什么都没有。只是聚合物元件本身，工作正常。
如何在不修改元素源代码的情况下做到这一点？
【问题讨论】：
标签： css polymer-1.0 shadow-dom
一种选择是强制设置样式。获取对元素的引用，使用其上的 DOM API 查询其影子 DOM 以查找要修改的内部元素，然后设置该引用的 style 属性。
例如，<gold-cc-cvc-input> 目前没有用于设置其信用卡图标样式的扩展点。
右键单击 Chrome 中的图标，然后在 DevTools 中检查它。我们看到这个图标有一个“icon”的id。
获取对<gold-cc-cvc-input id="cvc">的引用，并设置“icon”元素的style。在这里，我们使用 Polymer 的 automatic node finding 通过其 ID（即 this.$.cvc）获取对 <gold-cc-cvc-input> 的引用，然后是对内部“图标”元素（即 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>【讨论】：
this.getComputedStyleValue('--my-custom-style') 来强制查询 CSS 变量。
您可以从容器元素中对其进行样式设置，只需查看第 3 方元素的结构即可。例如<paper-card> 是您要设置样式的元素。纸卡里面有 div：
阴影 DOM (Polymer 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>shadow DOM (Polymer 2.0)
对于来自外部的样式元素，只需使用标签名称作为选择器
<style>
paper-card{
background-color: red;
padding: 30px;
}
</style>
但是，如果您想设置内部样式，则需要自定义 CSS 属性。如果这些没有设置，您目前只能通过 js 设置样式
【讨论】：