Почему я должен откладывать определения customElement? - PullRequest
Новая
       7

Почему я должен откладывать определения customElement?

0 голосов
/ 05 сентября 2018

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

Вот MWE: 

<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    customElements.define('test-one',
      class extends HTMLElement {
        constructor() {
          super()
          console.log(this.textContent)
        }
      }
    )
  </script>
</head>

<body>
  <test-one>First.</test-one>
  <test-two>Another.</test-two>

  <script>
    customElements.define('test-two',
      class extends HTMLElement {
        constructor() {
          super()
          console.log(this.textContent)
        }
      }
    )
  </script>
</body>
</html>

test-one выводит "" в консоли, test-two выводит "Another.".

Однако, это кажется совершенно не интуитивным, и я потратил много времени на чтение спецификации, но я не нашел объяснения этому поведению. Есть идеи? Где это указано или задокументировано? И это не проблема Chrome, Firefox ведет себя так же.

1 Ответ

0 голосов
/ 05 сентября 2018

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

Что вы не можете сделать, так это получить доступ к его содержимому (атрибутам, дочернему дереву, свойствам) в его constructor(), потому что эти элементы не были проанализированы (как предложил @Patrick Evans).

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

constructor() {
  super()
  setTimeout( () => console.log(this.textContent) )
}

Если вы все еще хотите поместить определение пользовательских элементов в заголовок, вы можете дождаться загрузки страницы. 

window.onload => customElements.define(...)

или, в зависимости от того, что вы ждете: 

document.addEventListener( 'DOMContentLoaded', customElements.define(...) )

Это не черно-белое изображение в спецификациях, потому что это скорее следствие процесса разбора, но вы можете прочитать в этом разделе HTML Standard :

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

«Случай отсутствия обновления» - это когда элемент определен до его анализа.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...