将customElement样式化为现有元素

如何解决将customElement样式化为现有元素

如何像现有元素一样设置自定义元素的样式？ （例如，将文档<pre>样式应用于<special-pre>自定义元素）

背景

• 典型的自定义元素基于通用HTMLElement，部分原因是并非所有浏览器（例如iOS）都支持is="special-pre"属性。
• 页面css的详细规则并不总是可以通过代码访问，例如，当主页通过CDN（CORS限制）使用样式表时

我尝试通过javascript过滤适用的pre样式选择器，并为新的自定义元素创建新规则，但是我碰到了CDN提供的样式表-CORS限制阻止访问单个规则。

我还考虑过插入一个虚拟元素并使用getComputedStyle(preElement)，但感觉就像是黑客一样，并且弄乱了用户的HTML标记。

其他解决方案（::part，css custom properties）需要使用自定义元素的文档样式的高级知识。

请注意，<pre>仅是示例。寻找一种通常的解决方案以使customElement使用已定义的用户样式，以便customElement可以足够通用，以便在具有不同样式表的不同页面中使用。