Web Components - 扩展原生元素的样式

Question

我想扩展本机按钮元素，但不确定如何添加样式。在 Google 的示例 here 中，他们不使用模板，因此 fancy-button 自定义元素本身就是按钮，而不是添加包含按钮的模板和阴影 DOM元素。如果我直接在阴影上添加一个按钮DOM，似乎无法实现扩展原生元素的目的，但我不知道如何设置和扩展原生元素。我如何创建一个自定义元素，它只是扩展为具有红色背景的本机按钮元素？

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

Answer 1

因为你没有影子DOM你可以使用全局CSS
你可以在connectedCallback中设置样式：this.style.background='red'
您可以动态创建一个带有唯一标识符的 STYLE 标签来限定您的元素

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

Important is the notation for your Customized Built-In Element

正确： <button is="fancy-button></button>

InCorrect: <fancy-button></fancy-button>（这是自治元素符号）

.

Firefox 陷阱：

不正确 表示法在 Firefox 中有效，但不在 Chrome 和 Opera

中

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>

在 Firefox 中显示为：

any number of Custom Elements before the SCRIPT tag are colored!

When the <SCRIPT> is moved into the <HEAD> Firefox won't color any background

When the script is executed after the onload event all buttons are colored

这是不规范的行为！

Web Components - 扩展原生元素的样式

Web Components - extend native element's style

html

css

web-component

native-web-component

Firefox 陷阱：