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

Если у вас есть такое определение, вы увидите, что все работает, как и ожидалось, как показано в этом коде Pen.

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

Кроме того, вы можете определить свои пользовательские элементы с помощью HyperHTMLElement booleanAttributes упростить этот шаблон для логических атрибутов.