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');
    }
  }
);

一旦您有了这样的定义，您就会看到一切都像预期的那样正常工作，如本代码所示，钢笔。

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

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