Экземпляр Webcomponent / custom-element прекращает анализ первого тега <script>

Question

Экземпляр Webcomponent / custom-element прекращает анализ первого тега <script>

Используя Google Chrome (v42) и встроенную поддержку веб-компонентов, я пытаюсь использовать пользовательский элемент, где содержимое пользовательского элемента иногда содержит встроенные теги javascript. Тем не менее, парсер, кажется, перестает анализировать содержимое элемента всякий раз, когда он встречает первый <script> тег. Что я делаю неправильно? Как я могу убедиться, что мой пользовательский элемент знает весь его контент, когда запускается инициализатор (например, madeCallback)?

Упрощенный пример:

<html>
  <body>
    <script>
      document.registerElement("element-count", {
        prototype: Object.create(HTMLElement.prototype, {
          createdCallback: {
            value: function(){
              this.appendChild(document.createTextNode(this.children.length));
            }
          }
        })
      })
    </script>

    <element-count>
      <div>alpha</div>
      <script></script><!-- this is here just to show that the parser stops -->
      <div>beta</div>
    </element-count>
  </body>
</html>

Ожидаемый результат:

alpha
beta
3

Фактический результат:

alpha
2
beta

CreateCallback пользовательского элемента запускается, как только синтаксический анализатор обнаруживает <script> элемент.

У меня нет большого контроля над фрагментом документа в пользовательском элементе (внутри <element-count>). Реальная версия пользовательского компонента пытается обернуть произвольные фрагменты DOM в богато украшенные коробки и делать другие вещи.

2

javascript google-chrome web-component custom-element

Источник

user4881047 09 май '15 в 03:01

1 ответ

Другие вопросы по тегам javascript google-chrome web-component custom-element

user4600982 11 авг '15 в 08:00 2015-08-11 08:00 · Answer 1 · 2015-08-11 08:00

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

Использовать body.onload событие. Или поставить скрипт, который вызывает registerElement после пользовательского элемента.

<html>
<body onload="register()">
    <script>
    function register()
    {
        document.registerElement( "element-count", {
            prototype: Object.create( HTMLElement.prototype, {
                createdCallback: {
                    value: function ()
                    {
                        this.appendChild( document.createTextNode( this.children.length ) );
                    }
                }
            } )
        } )
    }
   </script>
   <element-count id="c">
        <script></script><!-- this is here just to show that the parser stops --> 
        <div>alpha</div>
        <div>beta</div>
    </element-count>

<button onclick="alert(c.children.length)">Recount</button>