样式化Web组件中的封闭DOM节点

Question

I have defined a type-extension custom element as follows:

(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'
    });

}());

The declaration in the DOM looks like this:

<button is="my-button">Foo</button>

But the button retains the default button styling of the browser (a grey gradient background and an embossed effect).

Can I remove this styling from the element from within the web component itself ?

Put another way, does the host DOM have to contain styling to neuter the browser stylesheet as applied to web components that extend native elements?

Answer 1

For a button element, user agent styles are applied to the element itself (as opposed to its shadow DOM, as with elements like audio ) so that's where you'd need to style it. You can, however, style the custom button from inside its shadow DOM with the :host selector:

myButton.createdCallback = function() {
    var shadow, host;

    host = this;
    shadow = this.createShadowRoot();
    shadow.innerHTML = '<style>:host { color: red; } </style><content></content>';
};

Or you can style the custom button as you would any normal element, but from inside the createdCallback :

myButton.createdCallback = function() {
    this.style.color = 'red';
};