Javascript hyperHTML：自定义布尔属性

是否可以拥有自定义布尔属性？在布尔属性的hyperHTML文档中，说明如下：

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

此代码段不起作用：

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

this.html`；

---

如果我需要

custom

作为一个布尔属性，我如何使它成为“元素继承的一部分”？

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

对于自定义元素，简单地将属性定义为可观察属性不会使其成为继承属性，您需要显式地将其配置为可观察属性

示例

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）`
布尔检验
`;

---

或者，您可以通过

booleanAttributes

定义自定义元素，以简化布尔属性的样板文件。

不熟悉hyperHTML，但在`this.html=

中似乎缺少“=”；什么不起作用？

this.html

是一个接受模板文本的超html函数。问题在于，对于已定义的某些属性，例如禁用的

，它将正确呈现该属性。对于

myboolean

，它将呈现为

myboolean=“false”

。

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