相关疑难解决方法(0)

有没有一种方法可以使用es6模块将html模板导入到javascript中?

关于这个话题似乎有很多过时的问题,我找不到最近的一个(2018)。另外,其他问题只是着眼于使之起作用,我着眼于使该工作遵循ES6模块关于HTML导入的道路的正确路径。

所有浏览器似乎都同意html导入已死

 <link rel="import" href="https://xyz.html">
Run Code Online (Sandbox Code Playgroud)

如果是这样,是否有导入html的好方法

<template>
Run Code Online (Sandbox Code Playgroud)

在JavaScript中使用?

我在这里找到了这个技巧- 创建和使用自定义HTML组件?,但它依赖于JavaScript文件中的HTML作为字符串。

在我的理想世界中,我可以定义一个HTML文件template.html(这样我就可以得到不错的编辑器颜色编码),但是能够导入该文件以在我的dom中使用。

我知道有像lit-html这样的库可以使此操作变得容易,但是似乎由于ES6模块现在是标准的,并且由于不推荐使用html导入来代替ES6模块,因此应该有一些简单的本地方法来做到这一点吗?

web-component polymer html-imports es6-modules lit-html

11
推荐指数
0
解决办法
2522
查看次数

将模板与HTML自定义元素一起使用

我刚刚开始学习HTML自定义元素,并且通过阅读一系列介绍,教程和文档,我认为我对它的工作方式有很好的了解,但是我对使用或不使用正确方法有一个哲学问题该<template>标签。

自定义元素使您能够封装新功能,简化HTML文档的结构,并允许您简单地插入<my-custom-element>...</my-custom-element>标记而不是<div class="my-custom-element"><span class="part1">...</span><span class="part2">...</span></div>

然后,元素的类定义将设置该元素的结构和功能。然后,一堆教程描述了如何使用<template>...</template><slot>...</slot>设置自定义元素的内容。然后,您必须将模板代码包含在要使用该元素的每个HTML文档中,而不是在自定义元素类的构造函数中进行设置。这是否与自定义元素以使它们更易于移植的方式帮助简化和封装功能这一事实背道而驰?还是我误解了模板在文档中的正确用法和/或位置?

从SO来看,我能找到的最接近解决这个问题的方法是:

如何使用Vanilla JS淘汰自包含自定义元素中的模板?

但是答案本质上都绕在一起,说“不要使用<template>”,因此并不能真正消除我的困惑。

javascript html5 web-component html5-template custom-element

5
推荐指数
1
解决办法
1295
查看次数