如何以编程方式在 Web 组件的上下文中插入 <link rel="import">？

Question

我正在尝试仅使用 webcomponents.js 创建自定义组件，而不是完整的 Polymer 库。我已经设法创建了一些，但是这个有问题。此组件是 HTML<link> 标签的变体。它没有在 href 属性中包含有效的 URL，而是包含一个将被处理以生成有效的 URL 的字符串。示例：

<!-- "variable" will be replaced to produce a valid URL -->
<my-link href="http://example.com/{{variable}}.html" >

我处理此 Web 组件，使用有效的 URL 和 javascript 代码在 DOM 中添加一个 link，例如：

var link = document.createElement('LINK');
link.rel = "import";
link.href = processMyLinkHref();
this.appendChild(link);

稍后使用 doc.querySelectorAll('link[rel="import"]'); 指令正确检索 link。但是DOM对应的导入文件应该在那里，如果我使用常规<link rel="import">标签就可以得到它，在[=38=的import属性中不可用] 对象。

浏览器似乎没有获取资源。我试图查看 webcomponents.js 的源代码，发现通过闭包调用 handleImportjavascript 函数，但我对 javascript 的了解不足以真正理解发生了什么这里。

问题来了：如何让浏览器像获取普通文件一样获取导入的文件 HTML <link>？

Answer 1

好吧，免责声明，我不完全确定你的问题描述中发生了什么，但总体上回答问题标题，也许你看到了整个问题：

importHref(href, onload, onerror).

动态导入 HTML 文档。您可以在此处找到更多相关信息 - https://www.polymer-project.org/1.0/docs/devguide/utility-functions.html

Answer 2

我的javascript现在知识变好了，我明白了问题所在。与我写的相反，插入 link 节点时会获取资源。但它的内容没有存储在任何地方。您必须手动执行此操作。有点奇怪，但是...

有效的代码是：

// Create a new import node
var importNode = document.createElement('link');
importNode.href= href;
importNode.rel= 'import';
// Set the callback used when import is loaded. The line below is
// adapted from importHref function in Polymer
importNode.onload = importLoaded.bind(this, importNode);
// Triggers import loading
document.head.appendChild(importNode);

回调代码为：

var importLoaded = function (importNode, event) {
    // Put the document DOM tree in the import attribute as usual
    importNode.import = event.target.import;
};

你可以在自己的代码中使用importHref，但我想插入一段<link rel"import">代码，就像直接在页面源代码中写的一样。

如何以编程方式在 Web 组件的上下文中插入 <link rel="import">？

How to programmatically insert a <link rel="import"> in the context of web component?

web-component

polymer