我正在使用本机实现创建一个Web组件，该组件的html模板中包含指向图像的链接。但是，只有那些链接是绝对的或相对于主文档而言，这些链接才起作用，这意味着该组件不可重用或不可移植。另外，这是非常违反直觉的。
当前，我向所有需要使用图像的元素添加了data-url_prefix属性。然后，在为自定义元素创建影子根时，我用该参数的值替换了{{URL_PREFIX}}。
我的解决方案似乎非常糟糕。如果您提出更好的建议，我将非常高兴，谢谢。
我在http://webcomponents.org/polyfills/html-imports/页面上找到了一个有趣的报价：
多注说明
在导入的文档中，HTML中的href和src属性以及CSS文件中的url属性是相对于导入文档而不是主文档的位置的。
为什么polifill使用与本机实现不同的逻辑？
Web组件理想情况下应该封装其所有依赖项，但是如果Web组件需要图像，则它应该知道该图像的绝对URL，这不允许在文件结构中简单地移动该组件。
举例来说，我具有以下结构：
如果我将其更改为以下内容：
我将需要在这些文件中的某处更改指向icon.png的指针。我的问题是如何避免它，或者以一种优雅的方式解决它。另外，为什么实际的本机实现与polyfills冲突？
Webcomponent规范定义URL始终相对于主文档。正如您正确得出的结论，这当然会破坏Web组件的封装。换句话说，该规范存在很多错误，许多人对此表示抱怨。这就是为什么polyfill不符合规范的原因：它可以解决问题。
规格将改变。但是，由于要解决这个问题并不容易，因此仍可能需要一些时间。请查看以下链接：
• https://lists.w3.org/Archives/Public/public-webapps/2014OctDec/0013.html
• https://www.w3.org/Bugs/Public/show_bug.cgi ? id=20976 # c8
目前，解决方案是为您的组件将其模板图像的URL从相对更改为绝对。您可以获得templateBaseUrl以下内容：
(function (window, document)
{
var proto = Object.create(HTMLElement.prototype);
var template = document.currentScript.ownerDocument.querySelector("template");
var templateBaseUrl = template.baseURI;
proto.createdCallback = function ()
{
// Now find all images inside the template and change their src attribute,
// using templateBaseUrl. Also you must change CSS background-image: url(...);
...
};
document.registerElement('test-element', {prototype: proto});
})(window, document);
在诸如图标的小图像的情况下，解决此问题的另一种方法是使用数据URI将图像数据直接嵌入文档中。这也可以保存HTTP请求（直到我们拥有Http / 2）。例如：
<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句