hyperHTML: пользовательские логические атрибуты - PullRequest
Новая
       10

hyperHTML: пользовательские логические атрибуты

0 голосов
/ 30 августа 2018

Возможно ли иметь собственный логический атрибут? В документации HyperHTML для логических атрибутов говорится следующее:

Просто используйте логические атрибуты в любое время, когда они вам нужны, если это часть наследования элемента, это всегда будет делать правильно.

Этот фрагмент не работает: 

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

Если мне нужно, чтобы custom был логическим атрибутом, как я мог сделать его таким, чтобы он был "частью наследования элемента"?

1 Ответ

0 голосов
/ 31 августа 2018

Чтобы иметь атрибутную часть наследования, вам нужно определить его как таковой.

При использовании пользовательских элементов простое определение атрибута как наблюдаемого не сделает его унаследованным атрибутом, вам необходимо явно настроить его как таковой.

Пример 

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, чтобы упростить этот шаблон для логических атрибутов.

...