JS Custom Element получает внутренний HTML - PullRequest
Новая
       12

JS Custom Element получает внутренний HTML

2 голосов
/ 18 марта 2019

У нас есть этот пользовательский элемент, определенный так ... 

<my-button>
   Submit
</my-button>

и стандартные customElements определения 

class MyButton extends HTMLElement{
   constructor(){
      super();
      // our custom code...
      this.innerHTML = ''; // ??? where did the 'Submit' go?
   }
}

...

customElements.define('my-button',MyButton);

Проблема при попытке получить innerHTML, мызнаю, что мы можем сделать что-то вроде DOMContentLoaded или window.onload.

но иногда мы хотели бы создать 'my-button' динамически , используя код.и сделать это "рендерингом" после добавления ...

Есть ли стандартный способ сделать это?это как-то связано с connectedcallback() и остальными «подключенными» функциями?

Спасибо!

Обратите внимание - я пытался использовать connectedCallback() в качестве возможного решения,и это не решает проблему.

1 Ответ

0 голосов
/ 26 марта 2019

Существует ряд правил относительно того, что вы можете и не можете делать в конструкторе веб-компонента.Они ниже.

Но подумайте об этом:

Компонент может быть создан одним из трех способов:

  1. Часть начальной страницы / с использованием innerHTML: Когдабраузер загружает страницу или при использовании innerHTML вы можете добавлять атрибуты и дочерние элементы к компоненту как часть загрузки страницы или часть innerHTML. 
parent.innerHTML = '<super-hero name="Thor"><super-weapon value="Mjolnir"></super-weapon></my-comp>'.
Вы можете позвонить document.createELement, чтобы создать элемент.Вы не можете добавлять атрибуты или дочерние элементы до тех пор, пока элемент не будет создан. 
let superHero = document.createElement('super-hero');
let superWeapon = document.createElement('super-weapon');
superHero.setAttribute('name', 'Thor');
superWeapon.setAttribute('value',  'Mjolnir');
superHero.appendChild(superWeapon);
parent.appendChild(superHero)
Вы можете создать экземпляр объекта, используя new.Как и document.createElement, вы должны подождать, пока элемент не будет создан, прежде чем добавлять атрибуты и дочерние элементы. 
let superHero = new SuperHero();
let superWeapon = new SuperWeapon();
superHero.setAttribute('name', 'Thor');
superWeapon.setAttribute('value',  'Mjolnir');
superHero.appendChild(superWeapon);
parent.appendChild(superHero)

Как только компонент создан, он добавляется в DOM, и это когдаconnectedCallback вашего компонента называется.

И все эти три способа действительно сводятся к созданию экземпляра с new.document.createElement вызывает CustomElementRegistry.get, чтобы получить конструктор для этого элемента, а затем использует new для создания объекта.

И innerHTML анализирует HTML, а затем либо вызывает document.createElement или использует new для создания объекта.

Но при этом нет НИКАКИХ атрибутов или потомков, когда вызывается конструктор для вашего элемента.На самом деле, при вызове connectedCallback не может быть никаких дочерних элементов или атрибутов.Это одна из причин, по которой observedAttributes и attributeChangedCallback были добавлены в спецификацию.

Единственное, чего не хватает в спецификации, это знать, что кто-то добавил или изменил дочерние элементы либо до, либо после добавления компонента вDOM.Но если вы действительно хотите знать, когда изменяются дочерние элементы, вы можете использовать MutationObserver.

Именно поэтому в вашем конструкторе нет дочерних элементов или атрибутов.Они еще не добавлены.

Теперь перейдем к правилам:

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

  • Безусловный вызов super () должен быть первым оператором в теле конструктора, чтобы установить правильную цепочку прототипов и это значение до того, как любой следующий код будетrun.

  • Оператор возврата не должен появляться где-либо внутри тела конструктора, кроме случаев, когда это простой ранний возврат (возврат или возврат этого).

  • Конструктор не должен использовать методы document.write () или document.open ().

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

  • Элемент не должен иметь никаких атрибутов или дочерних элементов, поскольку это нарушает ожидания потребителей, использующих команду create.Методы Element или createElementNS.

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

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

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

...