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组件，使用带有javascript代码的有效URL在DOM中添加链接：

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

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

看起来浏览器尚未提取资源。我试着查看webcomponents.js的来源，通过闭包发现了对handleImport javascript函数的调用，但是我的javascript知识还不足以真正理解这里发生的事情。

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

Answer 1

好的免责声明，我不完全确定你在问题描述中发生了什么，但通常会回答问题标题＆amp;也许你看到了整体问题：

$groceryListItems

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

Answer 2

我的javascript知识现在更好，我理解这个问题。与我写的相反，插入链接节点时会获取ressource。但它的内容不会存储在任何地方。您必须手动执行此操作。这有点奇怪，但是......

有效的代码是：

// 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”/>？

2 个答案: