自定义元素只渲染一次答案

【问题标题】：Custom Elements rendering once only自定义元素只渲染一次
【发布时间】：2021-10-01 19:37:41
【问题描述】：

我希望能够创建可重用的自定义元素。在我当前的实现中，每个自定义元素只呈现一次。所有元素（全部 4 个）都被注入到 DOM 中，但只有每个元素的第一个实例被渲染。

我尝试过使用 ShadowDOM 和不使用它。有什么想法吗？

来自开发工具的屏幕截图：

index.html（摘自<body>）：

  <body>
    <funky-header></funky-header>
    <funky-content></funky-content>

    <funky-header></funky-header>
    <funky-content></funky-content>

    <script src="index.js" defer></script>
  </body>

我创建了一个通用脚本来从 .html 文件创建自定义元素：

index.js:

const elements = [
  { name: 'funky-header', shadowDom: false },
  { name: 'funky-content', shadowDom: false }
]

async function registerCustomElement(elementName, shadowDom) {
  console.log(`Registering ${elementName}`)
  await fetch(`./${elementName}.html`)
    .then(stream => stream.text())
    .then(async markup => {
      const doc = new DOMParser().parseFromString(markup, 'text/html');
      const template = doc.querySelector('template[alpine]')
      const templateContent = template.content
      const styles = doc.querySelector('style[scoped]')
      const styleContent = styles.textContent.toString()
      const elements = templateContent.querySelectorAll('[class]')

      class CustomElement extends HTMLElement {
        constructor() {
          super()
        }
        connectedCallback() {
          console.log(`inserting ${elementName}`)
          if (shadowDom) {
            const shadowRoot = this.attachShadow({ mode: 'closed' })
            shadowRoot.appendChild(template.content)
          } else {
            this.setAttribute(`data-x-${elementName}`, '')
            elements.forEach(element => {
              element.setAttribute(`data-x-${elementName}`, '')
            })

            const scopedStyles = styleContent.replaceAll(' {', '{').replaceAll('{', `[data-x-${elementName}] {`)
            const styleTag = document.createElement('style')
            styleTag.type = 'text/css'
            styleTag.append(document.createTextNode(scopedStyles))
            this.append(styleTag)
            this.append(templateContent)
          }
        }
      }
      customElements.define(elementName, CustomElement)
    })
    .catch(err => {
      console.log('ERROR:', err)
    })
}

elements.forEach(element => registerCustomElement(element.name, element.shadowDom))

一个示例模板文件： funky-header.html:

<template alpine>
  <h1 class="font-black text-blue-800">This is my header</h1>
  <p class="font-thin text-xs text-blue-600 my-text">This is a paragraph with a longer text, to simualte a descritpion.</p>
</template>

<style scoped>
  .my-text {
    color: purple;
  }
</style>

【问题讨论】：

您不应该在每次定义自定义元素时重新定义 CustomElement 类。
@Barmar - 每个元素类型定义一次。在我的例子中，我有两个不同的自定义元素，每个元素在我的 index.html 中有 2 个实例。因此，CustomElement 类只被创建了两次，并且不是针对每个实例。

标签： javascript html shadow-dom custom-element

【解决方案1】：

解决方案很简单，只需将this.append(templateContent) 替换为this.innerHTML = template.innerHTML。

【讨论】：