Web组件中的路径相对于根 [英] Paths in Web Components are Relative to Root

问题描述

我正在使用本地实现创建一个Web组件，它在html模板中链接到图像。
但是，这些链接只有在绝对或相对于主文档时才有效，这意味着该组件不可重用或便携。而且，这非常违反直觉。

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

我的解决方案看起来非常糟糕。我会很高兴，如果你建议一些更好的，谢谢。

---

我发现了一个有趣的报价 http://webcomponents.org/polyfills/html-imports/ 页面：

POLYFILL NOTES

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

为什么一个polifill会使用不同的逻辑，本地实现？

---

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

例如，我有以下结构：

• in dex.html
  
  
  
  
  
  • main.css
  
  
li>

• 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文件中的某处
我的问题是如何避免它，或者以优雅的方式解决它。此外，为什么实际本机实现与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，文档）
 {
 var proto = Object.create（HTMLElement.prototype）; 
 
 var template = document.currentScript.ownerDocument.querySelector（template）; 
 var templateBaseUrl = template.baseURI; 
 
 proto.createdCallback = function（）
 {
 //现在查找模板中的所有图像并更改它们的src属性
 //使用templateBaseUrl。还必须更改CSS background-image：url（...）; 
 ... 
}; 
 
 document.registerElement（'test-元素'，{prototype：proto}）; 
}）（window，document）; 
  

另一种解决此问题的方法是，在图标等小图像的情况下，直接嵌入图像数据到数据URI 的文档中。这也保存了HTTP请求（直到我们有Http / 2）。例如：

 < img src =data：image / gif; base64，R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o / XBs / fNwfjZ0frl3 / zy7 // // wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7\" /> 
  

I am creating a web component using native implementation, which in it's html template has links to images. However, those links only work if they are absolute, or relative to the main document, which means, that that component is not reusable, or portable. Also, it is very counterintuitive.

Currently, I add a data-url_prefix attribute to all elements that need to use images. Then, when creating a shadow root for my custom element, I replace a {{URL_PREFIX}} with the value of that argument.

My solution seems very bad. I would be very glad if you advised something better, thanks.

---

I found an interesting quote on the http://webcomponents.org/polyfills/html-imports/ page:

POLYFILL NOTES

In imported documents, href and src attributes in HTML, and url properties in CSS files, are relative to the location of the imported document, not the main document.

why would a polifill use different logic that the native implementation?

---

Web Components Ideally should encapsulate all their dependencies, but if a web component requires an image, it should know the absolute URL to that image, which does not allow the component to be simply moved around in file structure.

Say, for example I have the following structure:

• index.html
• css
  • main.css
• js
  • main.js
• web_components
  • cool_web_component
    • cool_web_component.html
    • icon.png

If I change it to the following:

• index.html
• css
  • main.css
• js
  • main.js
• cool_web_component
  • cool_web_component.html
  • icon.png

I would be required to change the pointer to icon.png somewhere in those files My question is how to avoid it, or solve it in elegant way. Also, why the actual native implementation is in conflict with the polyfills?

解决方案

The webcomponent specification defines that URLs are always relative to the main document. This, of course, breaks web component encapsulation, as you rightly concluded. In other words, the specification is buggy, and lots of people are complaining about it. That's why the polyfill doesn't follow the specification: it's fixing the problem.

The specification will change. However, since this is not trivial to fix, it could still take some time. Please see these links:

• https://lists.w3.org/Archives/Public/public-webapps/2014OctDec/0013.html

• https://www.w3.org/Bugs/Public/show_bug.cgi?id=20976#c8

For the moment, the solution is for your component to change the URL of its template images, from relative to absolute. You can get the templateBaseUrl as follows:

(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);

Another way of fixing this, in case of small images like icons, is to embed the image data directly into the document, with data URIs. This also saves HTTP Requests (until we have Http/2). For example:

<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />

这篇关于Web组件中的路径相对于根的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！