hyperHTML：自定义布尔属性

Question

是否可以具有自定义的布尔属性？在关于布尔属性的hyperHTML文档中，它声明了以下内容：

  

只要需要，就随时使用布尔属性，如果它是元素继承的一部分，它将总是做正确的事。

此代码段无效：

this.html`<custom-element myboolean=${this.flag}></custom-element>`;

如果我需要将custom设为布尔属性，我该如何使它成为“元素继承的一部分”？

Answer 1

要使属性成为继承的一部分，您需要这样定义它。

使用自定义元素，仅将属性定义为可观察并不能使其成为继承的属性，因此需要明确地对其进行配置。

示例

customElements.define(
  'custom-element',
  class CustomElement extends HTMLElement {
    static get observedAttributes() {
      return ['myboolean'];
    }
    get myboolean() {
      return this.hasAttribute('myboolean');
    }
    set myboolean(value) {
      if (value) this.setAttribute('myboolean', true);
      else this.removeAttribute('myboolean');
    }
  }
);

一旦有了这样的定义，您将看到一切正常，as shown in this Code Pen。

hyperHTML(document.body)`
  <custom-element myboolean=${false}>
    Boolean test
  </custom-element>
`;

或者，您可以通过HyperHTMLElement booleanAttributes定义自定义元素，以简化布尔属性的样板。