1

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

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

1 回答 1

2
  1. 由于您没有涉及 shadowDOM，因此您可以使用全局 CSS
  2. 您可以在 connectedCallback 中设置样式：this.style.background='red'
  3. 您可以动态创建具有唯一标识符范围的 STYLE 标签

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

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

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

不正确：（ <fancy-button></fancy-button> 这是自治元素表示法）

.

火狐的陷阱：

不正确的符号在 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>移入Firefox时<HEAD>不会为任何背景着色

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

这是非标准行为！

于 2019-12-21T11:09:07.487 回答