重置样式继承在影子中不起作用 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
的替代品
我正在使用阴影 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