Web组件中的路径与Root相关

Question

我正在使用本机实现创建一个Web组件,在它的html模板中有指向图像的链接.但是,这些链接仅在绝对或相对于主文档时才起作用,这意味着该组件不可重用或可移植.而且,这非常违反直觉.

目前,我将data-url_prefix属性添加到需要使用图像的所有元素.然后,在为自定义元素创建阴影根时,我将{{URL_PREFIX}}替换为该参数的值.

我的解决方案似乎很糟糕.如果你建议更好的东西,我会很高兴,谢谢.

---

我在http://webcomponents.org/polyfills/html-imports/页面上找到了一个有趣的引用:

POLYFILL笔记

在导入的文档中,HTML中的href和src属性以及CSS文件中的url属性是相对于导入文档的位置而不是主文档的位置.

为什么polifill会使用与本机实现不同的逻辑？

---

Web组件理想情况下应该封装它们的所有依赖项,但是如果Web组件需要图像,它应该知道该图像的绝对URL,这不允许在文件结构中简单地移动组件.

比方说,例如我有以下结构:

• 的index.html
• CSS
  • 的main.css
• JS
  • main.js
• web_components
  • cool_web_component
    • cool_web_component.html
    • 的icon.png

如果我将其更改为以下内容:

• 的index.html
• CSS
  • 的main.css
• JS
  • main.js
• cool_web_component
  • cool_web_component.html
  • 的icon.png

我将被要求在这些文件中的某处更改指向icon.png的指针我的问题是如何避免它,或以优雅的方式解决它.另外,为什么实际的原生实现与polyfill冲突？

Answer 1

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" />