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

Question

我正在使用 shadow dom 来避免我的元素的样式受到宿主文档的意外影响，但它仍然继承了父元素的一些属性，如“颜色”、“字体大小”、“行高”、等

在谷歌搜索后，我发现有一个属性可以用来实现这一点，它就是'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 不起作用？或者是否有任何其他解决方案来防止 shadow dom 中的样式继承？感谢任何帮助!

ps.我用的是chrome 39，其他浏览器直接忽略

Answer 1

首先是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);

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