Question

由于HTML导入现在已在Chrome浏览器（https://www.chromestatus.com/feature/5144752345317376）中弃用，并且将其删除，因此我想知道还有哪些替代方法。

我目前正在使用HTML导入来导入HTML模板。到目前为止，我只看到两种选择：

将所有HTML文件捆绑在一个文件中。这还将缩短生产中的下载时间，但是这将减少封装和模块化。有一个聚合物捆绑程序可以通过遍历单独的HTML文件中的HTML导入语句来完成此工作。但这意味着，即使将来任何浏览器都不支持HTML导入，也保留在我的代码中。
使用XHttpRequests构建某种模块加载器，并在运行时将模板编织到一个HTML文件中。这样可以保留封装和模块化，但是这对我来说是一种难闻的气味，因为我基本上将自行重建import-Statements。

是否存在一种新的导入HTML模板的原始方法？（通过“香草”，我基本上是指一种无需任何其他工具（如预编译器或打包程序）的方法）

Answer 1

index.html：

<script type="module">
  import { CustomHTMLElement } from './CustomHTMLElement.js'

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

<custom-html-element></custom-html-element>

CustomHTMLElement.js：

import { createTemplate } from './createTemplate.js'

const template = createTemplate(`
  <template>
    <style>
      .box {
        width: 2rem;
        height: 2rem;
        background-color: red;
      }  
    </style>
    <div class="box"></div>
  </template>
`)

export class CustomHTMLElement extends HTMLElement {
  constructor() {
    super()
    const templateContent = template.content
    const shadowRoot = this.attachShadow({mode: 'closed'})
    shadowRoot.appendChild(templateContent.cloneNode(true))
  }
}

createTemplate.js:

import { createDOM } from './createDOM.js'

export function createTemplate(templateText) {
  const dom = createDOM(templateText)
  const template = dom.querySelector('template')
  return template
}

createDOM.js：

export function createDOM(htmlText) {
  return new DOMParser().parseFromString(htmlText, 'text/html')
}

请参阅 https://github.com/SanjoSolutions/web-components 以获取在 Unlicense 许可下许可的代码。

如何在没有HTML导入的情况下打包或导入HTML模板

1 个答案: