javascript - hyperHTML：自定义布尔属性

Question

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

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

此片段不起作用：

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

如果我需要custom成为一个布尔属性，我怎样才能使它成为“元素继承的一部分”？

Answer 1

为了拥有继承的属性部分，您需要这样定义它。

对于自定义元素，简单地将属性定义为 observable 不会使其成为继承属性，您需要明确地对其进行配置。

例子

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定义自定义元素，以简化布尔属性的样板。