Web组件中包围DOM节点的样式设计
Web组件中包围DOM节点的样式设计
提问于 2015-06-04 21:06:39
我已经定义了一个类型扩展自定义元素如下：
(function() {
'use strict';
var importDoc, myButton;
importDoc = document.currentScript.ownerDocument;
myButton = Object.create(HTMLButtonElement.prototype);
myButton.createdCallback = function() {
var template, templateClone, shadow, host;
template = importDoc.querySelector('#my-button-large-template');
templateClone = importDoc.importNode(template.content, true);
host = this;
shadow = this.createShadowRoot();
shadow.appendChild(templateClone);
};
document.registerElement('my-button', {
prototype: myButton,
extends: 'button'
});
}());DOM中的声明如下所示：
<button is="my-button">Foo</button>但该按钮保留浏览器的默认按钮样式(灰色梯度背景和浮雕效果)。
我可以从web组件本身内部的元素中删除此样式吗？。
换句话说，主机DOM是否必须包含样式，以使应用于扩展本机元素的web组件的浏览器样式表中性化？
回答 1
Stack Overflow用户
发布于 2015-06-10 03:22:06
对于button元素，用户代理样式被应用到元素本身(与其影子DOM不同，就像audio这样的元素)，因此您需要在那里对其进行样式设置。但是，您可以使用:host选择器从其阴影DOM中为自定义按钮设置样式：
myButton.createdCallback = function() {
var shadow, host;
host = this;
shadow = this.createShadowRoot();
shadow.innerHTML = '<style>:host { color: red; } </style><content></content>';
};也可以将自定义button设置为任何普通元素的样式，但可以从createdCallback内部设置样式。
myButton.createdCallback = function() {
this.style.color = 'red';
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30654163
复制相关文章
相似问题
腾讯云开发者
