Question

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

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

Answer 1

因为您没有涉及shadowDOM，所以可以使用全局CSS
您可以在connectedCallback中设置样式：this.style.background='red'
您可以动态地创建一个具有唯一标识符的STYLE标签，为您的元素定义范围

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

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

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

不正确： <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中显示为：

任何数量的自定义元素之前，标记SCRIPT都是彩色的！



将<SCRIPT>移到<HEAD>时，Firefox不会为任何背景着色


在onload事件之后执行脚本时，所有按钮都已着色

这是非标准行为！

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

1 个答案:

Firefox陷阱：