Веб-компоненты - обернуть дочерние элементы - PullRequest
Новая
       12

Веб-компоненты - обернуть дочерние элементы

1 голос
/ 07 ноября 2019

У меня есть веб-компонент, который может иметь детей. И, увидев, что JS хочет, чтобы он обернул своих текущих дочерних элементов в модальный тег (у которого уже есть дочерний элемент).

В настоящее время у меня есть: 

class Modal extends HTMLElement {
    connectedCallback() {
         // Wrap current children inside of dialog element
    }
}
customElements.define("modal-component", Modal);

<modal-component>
    <p> Lorem impsum </p>
</modal-component>

<!-- I want the logic in connectedCallback() to produce this with the p tag now being wrapped inside dialog -->
<modal-component>
    <dialog>
         <span class="close">&times;</span>
         <p> Lorem impsum </p>
    </dialog> 
</modal-component>

Я попытался написатьэто внутри connectedCallback, но значение this.innerHTML равно '', даже если есть дети 

this.innerHTML = `<dialog><span class="close">&times;</span>${this.innerHTML}</dialog>`;

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

Каков наилучший способ сделать это?

1 Ответ

1 голос
/ 07 ноября 2019

С помощью слотов вы можете вставить несколько дочерних элементов: 

connectedCallback() {
     this.attachShadow( { mode: 'open' } )
         .innerHTML = `<span class="close">&times;</span>
                 <slot></slot>`
}

В качестве альтернативы, если вы не хотите использовать <slot>, вам нужно убедиться, что содержимое пользовательского элемента анализируется, когда выполучить доступ к innerHTML собственности.

Это может быть достигнуто либо с помощью setTimeout, либо requestAnimationFrame, либо путем определения пользовательского элемента после анализа HTML-кода (если это возможно): 

<custom-element>...</custome-element>
<script>
  customElements.define( 'custom-element', ... )
</script>
...