javascript - 在 Web 组件中设置封闭的 DOM 节点的样式

Question

我定义了一个类型扩展自定义元素如下:

(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>

但该按钮保留了浏览器的默认按钮样式(灰色渐变背景和浮雕效果)。

我可以从网络组件本身中移除该元素的样式吗？

换句话说，宿主 DOM 是否必须包含样式以中和浏览器样式表，因为它应用于扩展 native 元素的 Web 组件？

Answer 1

对于 button 元素，用户代理样式应用于元素本身(与它的影子 DOM 相反，如 audio 之类的元素)所以这就是你的地方d 需要设置样式。但是，您可以使用 :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';
};