Question

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

搜索谷歌后，我发现存在一个可用于实现此目的的属性，它是'resetStyleInheritance'属性。我使用这样的属性：

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

或在元素中添加'reset-style-inheritance'属性，如：

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

但是，这两种情况都不起作用。

我还在这里找到了一个错误报告：WebKit Bugzilla

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

为什么resetStyleInheritance不起作用？或者是否有任何其他解决方案来阻止阴影dom中的样式继承？感谢任何帮助！

ps.我正在使用chrome 39，而忽略其他浏览器。

Answer 1

首先，不应使用reset-style-inheritance属性is now obsolete。默认情况下，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);

所以我尽量保持一切尽可能清晰。希望它有所帮助。

Answer 2

使用CSS all属性，它取代resetStyleInheritance

重置样式继承在阴影dom中不起作用

2 个答案: