我正在寻找一种方法来替换 ::shadow 现在它已经消失了。我在这个网站上找到了两个有关它的主题，但都意味着修改阴影元素。
here和 there
但是 Web 组件的重点是能够将我们在互联网上找到的任何元素导入到我们的网页/应用程序中。所以，这意味着我不想修改这些“第三方元素”上的任何内容，因为有来源，如果我修改它们，当我以后更新它们时它会被覆盖。
所以，假设我在 webcomponents.org 上下载了一个创建某种按钮的元素，但我需要更改此按钮的颜色，因为它不适合我的页面样式/应用程序。元素创建者没有在他的 CSS 中放置任何变量，没有 @apply 规则，没有导入，什么都没有。只是聚合物元件本身，工作正常。
如何在不修改元素源代码的情况下做到这一点？
最佳答案
一种选择是强制设置样式。获取对该元素的引用，使用其上的 DOM API 查询其影子 DOM 以查找要修改的内部元素，然后设置 style该引用的属性。
例如， <gold-cc-cvc-input> 目前没有用于设置信用卡图标样式的扩展点。
右键单击 Chrome 中的图标，然后在 DevTools 中检查它。我们看到图标有一个
id“图标”。获取
<gold-cc-cvc-input id="cvc">的引用，并设置style“图标”元素。在这里，我们使用 Polymer 的 automatic node finding获取对<gold-cc-cvc-input>的引用通过其 ID(即this.$.cvc)，然后引用内部“图标”元素(即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>关于css - 如何在不修改第三方元素的情况下替换::shadow，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42027495/