我正在寻找一种替代方法，::shadow因为它已经不复存在了。我在此网站上找到了两个有关此主题的主题，但都暗示要修改shadow元素。在这里和那里
但是，Web组件的关键是能够导入我们在网页/应用程序中在Internet上找到的任何元素。因此，这意味着我不想在这些“第三方元素”上进行任何修改，因为存在源，并且如果我对其进行修改，则在以后对其进行更新时它将被覆盖。
因此，假设我在webcomponents.org创建某种按钮的元素上进行下载，但是我需要更改此按钮的颜色，因为它不适合我的页面/应用程序的样式。元素创建者没有在他的CSS中放置任何变量，没有@apply规则，没有导入，什么也没有。只是聚合物元件本身，才能正常工作。
如何在不修改元素源代码的情况下做到这一点？
一种选择是强制性地设置样式。获取对该元素的引用，使用该元素上的DOM API为其要修改的内部元素查询其影子DOM，然后设置该style引用的属性。
例如，<gold-cc-cvc-input>当前没有用于设置其信用卡图标样式的扩展点。
右键点击Chrome中的图标，然后在DevTools中对其进行检查。我们看到图标上有一个id“图标”。
获取对的引用<gold-cc-cvc-input id="cvc">，并设置style“ icon”元素的。在这里，我们使用Polymer的自动节点查找功能来获取<gold-cc-cvc-input>其ID的引用（即this.$.cvc），然后是对内部“ 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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句