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

reset style inheritance not working in shadow dom

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

在搜索 google 之后,我发现存在一个可用于实现此目的的属性,它是 '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.I正在使用chrome 39,忽略其他浏览器。

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

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

使用CSSall属性,它是resetStyleInheritance

的替代品