Web组件-扩展本机元素的样式

Question

我想扩展原生按钮元素，但不确定如何添加样式。在Google这里的例子中，他们不使用模板，因此fancy button自定义元素本身就是按钮，而不是添加包含按钮元素的模板和阴影DOM。如果我只是直接在shadowdom中添加一个按钮，那么扩展本机元素的目标似乎失败了，但我不知道如何设置和扩展本机元素的样式。如何创建一个自定义元素，它只是扩展为红色背景的本机按钮元素？

var style = `button { background-color: red; };
class FancyButton extends HTMLButtonElement {
  constructor() {
    super();
  }
customElements.define('fancy-button', FancyButton, {extends: 'button'});

Answer 1

1. 由于您不需要使用shadowDOM，因此可以使用全局CSS
2. 您可以在connectedCallback中设置样式：this。风格背景=“红色”
3. 您可以动态创建一个样式标记，其唯一标识符作用于您的元素

有关所有3个示例，请参见JSFIDLE：https://jsfiddle.net/CustomElementsExamples/Lf829wpy/

重要的是自定义内置元素的符号

正确：

不正确：

...

错误的符号在Firefox中有效，但在Chrome中无效

Firefox处理具有自治元素符号的扩展内置元素
，但仅处理定义之前在DOM中创建的元素：

这

<fancy-button>Hello Fancy Red Button #1</fancy-button>

<script>
    class FancyButton extends HTMLButtonElement {
        constructor() {
            super();
        }

        connectedCallback() {
            this.style.background = 'red';
        }
    }

    customElements.define('fancy-button', FancyButton, { extends: 'button' });
</script>

<fancy-button>Hello Fancy Red Button #2</fancy-button>