标签: html-imports
如果HTML Imports已停用/已弃用,那么导入Web组件(X-Tag)模板的最佳方法是什么？
我正在研究我的第一个X-Tag应用程序,在它的页面上,它表示它可以与Web组件API一起使用,例如"自定义元素,影子DOM,模板和HTML导入".
我已经开始研究我的模板,但是导入它们的最佳选择是什么,现在已经弃用了HTML Imports？
推荐指数
解决办法
查看次数
如何在升级自定义元素时执行脚本
我已经定义了一个自定义元素,我只想在自定义元素升级到其注册类型时才执行脚本.用例是我必须调用自定义方法.
我的主要html文件如下所示:
<project-list></project-list>
<script>
var project_list = document.getElementsByTagName("project-list")[0]
project_list.custom_method("some_data");
</script>
自定义元素在HTML导入中注册,如下所示:
<script>
"use strict";
var currentScript = document._currentScript || document.currentScript;
class ProjectList extends HTMLElement {
createdCallback(){
console.log("created");
}
custom_method(data) {
console.log("custom_method() OK");
console.log(data);
this.innerHTML = data;
}
}
document.registerElement("project-list", ProjectList);
</script>
我的问题很简单:如何确保主要html文件中的脚本仅在自定义元素获得其custom_method方法后才被调用？
我正在寻找一个优雅的解决方案.规范作者会想到的东西.我不介意更改架构(例如,如果有必要,可以将javascript从主文件移动到另一个自定义元素中).
推荐指数
解决办法
查看次数
有没有一种方法可以使用es6模块将html模板导入到javascript中？
关于这个话题似乎有很多过时的问题，我找不到最近的一个（2018）。另外，其他问题只是着眼于使之起作用，我着眼于使该工作遵循ES6模块关于HTML导入的道路的正确路径。
所有浏览器似乎都同意html导入已死
<link rel="import" href="https://xyz.html">
如果是这样，是否有导入html的好方法
<template>
在JavaScript中使用？
我在这里找到了这个技巧- 创建和使用自定义HTML组件？，但它依赖于JavaScript文件中的HTML作为字符串。
在我的理想世界中，我可以定义一个HTML文件template.html（这样我就可以得到不错的编辑器颜色编码），但是能够导入该文件以在我的dom中使用。
我知道有像lit-html这样的库可以使此操作变得容易，但是似乎由于ES6模块现在是标准的，并且由于不推荐使用html导入来代替ES6模块，因此应该有一些简单的本地方法来做到这一点吗？
推荐指数
解决办法
查看次数
使用HTML链接rel导入HTML文档
我正在尝试将HTML文档导入到我的主文档中
<link rel="import" href="my-tabs.html">
但它似乎没有起作用.
我正在使用Chrome 28 关注此演示文稿,并且我在以下位置启用了这两个标志about:flags:
Enable experimental WebKit features
Enable experimental JavaScript
我错过了什么吗？或者我需要启用另一个标志才能获得它吗？
推荐指数
解决办法
查看次数
嵌套元素(Web组件)无法获取其模板
我使用带有两个自定义元素(v1)的Web组件做了一个简单的例子,其中一个嵌套在另一个元素中.index.html的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="import" href="app-container.html">
</head>
<body>
<app-container></app-container>
</body>
</html>
APP-container.html:
<link rel="import" href="toolbar.html">
<template id="app-container">
<app-toolbar></app-toolbar>
</template>
<script>
customElements.define('app-container', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({ mode: 'open' });
const content = document.currentScript.ownerDocument.querySelector('#app-container').content;
shadowRoot.appendChild(content.cloneNode(true));
}
});
</script>
toolbar.html:
<template id="app-toolbar">
<p>Ok!</p>
</template>
<script>
customElements.define('app-toolbar', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({ mode: 'open' });
const content = document.currentScript.ownerDocument.querySelector('#app-toolbar').content; …javascript web-component shadow-dom html5-template html-imports
推荐指数
解决办法
查看次数
如何在没有Html-Imports的情况下打包或导入Html-Templates
由于Html-Imports现已在Chrome(https://www.chromestatus.com/feature/5144752345317376)中弃用,并且将被删除,我想知道其他选择是什么.
我目前正在使用Html-Imports导入Html模板.到目前为止,我只看到两种选择:
- 将所有HTML文件捆绑在一个文件中.这也会改善生产中的下载时间,但这会减少封装和模块化.有一个聚合物捆绑器可以通过在分离的HTML文件中遍历HTML-Import-Statements来完成这项工作.但这意味着,HTML-Imports仍然存在于我的代码中,即使将来任何浏览器都不支持它.
- 使用XHttpRequests构建某种模块加载器,并在运行时将模板编织到一个HTML文件中.这将保留封装和模块化,但这对我来说有一个难闻的气味,因为我基本上会自己重建import-Statements.
是否有一种新的香草方式来导入Html模板？(通过"vanilla"我基本上意味着没有任何其他工具,如预编译器或捆绑器参与)
推荐指数
解决办法
查看次数
Google Chrome 是否仍支持 HTML 导入？
根据http://blog.teamtreehouse.com/introduction-html-imports
要在 Chrome 中启用 HTML 导入，请转到 chrome://flags 并启用启用 HTML 导入标志。完成后，单击屏幕底部的“立即重新启动”按钮以重新启动支持 HTML 导入的 Chrome。
但我在最新版本的谷歌浏览器标志中找不到它
推荐指数
解决办法
查看次数
我可以获取引用外部 svg 的 use 元素的内容吗？
我正在构建一个将 svg 图标呈现到 Shadow Dom 页面上的 Web 组件。IE
<ba-icon i="airplane"></ba-icon>
我有一个外部 svg sprite 文件，其中包含大量 SVG 图标。
Web 组件的内部将以下内容渲染到 Shadow Dom 中：
<svg>
<use xlink:href="i.dist.svg#i-airplane"></use>
<svg>
一切都在屏幕上正确呈现，但我想要一些嵌入在 SVG 内部的信息，特别是包含在viewbox, 中的信息（例如：）viewBox="0 0 32 32"。
我知道在 中渲染的内容use也输入到 Shadow Dom 中。但我试图找到另一种获取嵌入到use. 我试图对 svg 的内容进行 ajax，但这对于页面上的多个图标来说变成了一个大问题，因为 Web 组件的每个实例现在都在进行该调用。我还能怎么做？
以供参考：
推荐指数
解决办法
查看次数
HTMLImports.whenReady和window.addEventListener（'WebComponentsReady'，function（e）{`之间有什么区别
HTMLImports.whenReady 和之间有什么区别window.addEventListener('WebComponentsReady', function(e) {？
“要在您的主HTML文档中定义元素，请从HTMLImports.whenReady（callback）定义该元素。当文档中的所有导入均已完成加载时，将调用回调。”
在本机导入下，主文档中的标签会阻止加载导入。这是为了确保导入已加载，并且其中的所有注册元素都已升级。这种本机行为很难进行polyfill，因此“ HTML导入” polyfill不会尝试。而是WebComponentsReady事件是此行为的代表：
两者有什么区别？
javascript web-component polymer custom-element html-imports
推荐指数
解决办法
查看次数
横跨“相同类型的” web组件共享风格
如果我理解正确，创建Web组件的一个实例可以概括为创造一个影子根，从模板复制标记，如到其中：
var Template = document.querySelector('#myTemplate');
var TemplateClone = document.importNode(Template.content,true);
TargetElement.appendChild(TemplateClone);
当然，如果模板中包含的风格标签的CSS规则，这些都将被复制为好。因此，我们可以有属于一个网络组件的内部标记范围的样式。
问题：
- 是否有任何性能问题，当我创建万吨非常相同的Web组件的实例，作为样式只是复制，而不是重复使用？
- 是否有要共享相同的Web组件的多个实例的风格节点的方法吗？
推荐指数
解决办法
查看次数
标签 统计
html-imports ×10
web-component ×10
javascript ×6
html ×3
html5 ×3
polymer ×2
shadow-dom ×2
es6-modules ×1
lit-html ×1
svg ×1
templates ×1
x-tag ×1