Fatal编程技术网
  • css/
  • Css 将customElement设置为与现有元素类似的样式

Css 将customElement设置为与现有元素类似的样式

css

Css 将customElement设置为与现有元素类似的样式,css,custom-element,Css,Custom Element,如何像现有元素一样设置自定义元素的样式？（例如，将文档样式应用于自定义元素） 背景 典型的自定义元素部分基于通用HTMLElement，因为并非所有浏览器（即iOS）都支持is=“special pre”属性 页面css详细规则并不总是可以通过代码访问，例如当主页通过CDN使用样式表时（CORS限制） 我曾尝试通过javascript过滤适用的pre样式选择器，并为新的自定义元素创建新规则，但我遇到了CDN提供的样式表的问题—CORS限制阻止了对单个规则的访问 我还想过插入一个虚拟元素并使用

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

背景

  • 典型的自定义元素部分基于通用HTMLElement，因为并非所有浏览器（即iOS）都支持
    is=“special pre”
    属性
  • 页面css详细规则并不总是可以通过代码访问，例如当主页通过CDN使用样式表时（CORS限制）
我曾尝试通过javascript过滤适用的
pre
样式选择器，并为新的自定义元素创建新规则，但我遇到了CDN提供的样式表的问题—CORS限制阻止了对单个规则的访问

我还想过插入一个虚拟元素并使用
getComputedStyle（preElement）
，但它感觉像是一个黑客，会弄乱用户的HTML标记

其他解决方案（
：：part
，
css自定义属性
）需要预先了解将使用自定义元素的文档样式

请注意，
只是一个例子。正在寻找一种解决方案，使customElement使用已定义的用户样式，以便customElement具有足够的通用性，可以在具有不同样式表的不同页面中使用