hyperHTML：自定义布尔属性

Question

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

Just use boolean attributes any time you need them, if it's part of the element's inheritance, it'll always do the right thing.

此代码段无效：

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

如果我需要 custom 作为一个布尔属性，我怎样才能让它成为 "part of the element's inheritance"？

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

hyperHTML：自定义布尔属性

hyperHTML: Custom Boolean Attributes

javascript

hyperhtml