重置样式继承在shadow-dom中不起作用

reset style inheritance not working in shadow dom

本文关键字：shadow-dom 不起作用 继承 样式      更新时间：2024-06-26

我使用shadow-dom来避免我的元素的样式受到宿主文档的意外影响，但它仍然继承了父元素的一些属性，如"color"、"font-size"、"line-height"等。

在谷歌上搜索后，我发现有一个属性可以用来实现这一点，那就是"resetStyleHeritage"属性。我使用这样的属性：

var root = this.createShadowRoot();
root.resetStyleInheritance = true;

或者在元素中添加"重置样式继承"属性，如：

<div reset-style-inheritance=true></div>

然而，这两种情况都不起作用。

我还在这里发现了一个错误报告：WebKit Bugzilla

我的小提琴：http://jsfiddle.net/sangelee/90za0euy/1/

为什么resetStyleHeritage不起作用？或者有其他解决方案可以防止shadow-dom中的样式继承吗？感谢您的帮助！

ps。我使用的是chrome 39，而忽略了其他浏览器。

首先，reset-style-inheritance属性现在已经过时，不应该使用。默认情况下，shadow DOM现在不再受浅色CSS的影响。

你的代码中包含了大量我已经消除的小故障（比如你在注册font-ruler之前创建了它，而你正在处理attachedCallback，而要处理的正确事件是createdCallback。）实时工作版本位于此处：http://jsfiddle.net/284au4nw/

几条评论：

var proto = Object.create(HTMLElement.prototype, {
  createdCallback: {
    value: function() {
      var t = document.querySelector('#s-font-ruler-template');
      this.createShadowRoot().appendChild(t.content);
    }
  }
});
document.registerElement('font-ruler', {prototype: proto});

--正在将模板内容附加到影子根目录中。您不需要在现有文档中导入节点（这似乎欺骗了Chrome，并迫使它应用浅色样式…嗯…嗯…有时。）

<font-ruler></font-ruler>

--在HTML中与完全相同

var font_ruler = document.createElement('font-ruler');
document.body.appendChild(font_ruler);

所以我尽量让一切都清楚。希望能有所帮助。

使用CSS all属性，它是resetStyleInheritance 的替代品

相关文章：