自定义组件库中的相对路径 [英] Relative paths in custom component library

问题描述

我的项目结构看起来像这样

  -client 
 ---- index.html 
 ---- index.ts 
 -core 
 ---- controls 
 -------- myControl.html 
 ------ --myControl.ts 
 ---- css 
 -------- common.css 
  

myControl.html包含通过shadow dom注册的自定义组件的定义。
在它的模板导入common.css是核心库的一部分：

 < template id = t。 
< style> 
 @import url（'../ css / common.css'）; 
 .... 
< / style> 
 .... 
< / template> 
< script> 
（function（）{
 var importDoc = document.currentScript.ownerDocument; // importee 
 
 var proto = Object.create（HTMLElement.prototype）; 
 
 proto.createdCallback = function（）
 {
 //在导入中获取模板
 var template = importDoc.querySelector（'＃t'）; 
 
 // import template into 
 var clone = document.importNode（template.content，true）; 
 
 var root = this.createShadowRoot（）; 
 root.appendChild（clone） ; 
 
 var control = this; 
 
 System.import（'core / controls / myControl'）then（function（m）
 {
 var t = new m.myControl（control.shadowRoot）; 
}）; 
}; 
 
 document.registerElement（'my-control'，{prototype：proto}） ; 
}）（）; 
< / script> 
  

现在当我在index.html上使用my-control时，浏览器抱怨它不能导入common。 css。因为它使用相对于index.html的路径搜索它，而不是相对于其原始位置。我理解这是合理的，因为我们从在index.html上下文中运行的脚本创建了影子dom。

我的问题是：如何开发我的控制自定义组件，它是核心库的一部分，可以在不同的地方重复使用/分布，并且仍然正确地引用也是核心库一部分的css / images / etc等资源。

提前感谢。

解决方案

您可以使用绝对网址吗？ >

Post / deep / deprecation和你一样，css @injects是我们在组件中应用通用样式的方式。

但是如何识别常见风格的路径？

上下文，我们在一个单一的硫化html文件托管我们的组件，客户端使用html导入在他们的应用程序中使用它。
现在在imports.html中，我们已经包含了一个小脚本，它使用 document.currentScript.ownerDocument.baseURI 来标识自己的URL，因为我们知道公共css relative of imports.html，我们构建这个url并在模板中注入包含css @imports的构造样式标签。

这样，当组件获得更新（当shadow-root附加到它）时，它会调用下载common.css（因为它知道绝对url）并在shadow dom中使用它。

所以，总结不用硬编码样式标签与css @import在模板构造它基于您当前的导入html的url并注入它在模板内。

这样的东西可能：

  //正在执行的html导入或脚本的URL。 
 var host = document.currentScript.ownerDocument.baseURI; 
 // splice and dice your host url to get protocol and base url 
 ... 
 //让我们说它是proto和base 
 var cssURL = proto + base + /core/css/common.css'
 //这里用css导入构造一个样式标签。 
 //因为你可以访问document-fragment带有html import 
 //查找模板并在里面注入这个样式标签。 
 //记得注入它顶部:) 
  

I have project with structure that looks like this

-client
----index.html
----index.ts
-core
----controls
--------myControl.html
--------myControl.ts
----css
--------common.css

myControl.html contains definition of custom component that is registered via shadow dom. in its template imports common.css that is part of "core" library:

<template id="t">
    <style>
        @import url('../css/common.css');
    ....
    </style>
    ....
</template>
<script>
  (function() {
      var importDoc = document.currentScript.ownerDocument; // importee

      var proto = Object.create(HTMLElement.prototype);

      proto.createdCallback = function() 
      {
          // get template in import
          var template = importDoc.querySelector('#t');

          // import template into
          var clone = document.importNode(template.content, true);

          var root = this.createShadowRoot();
          root.appendChild(clone);

          var control = this;

          System.import('core/controls/myControl').then(function(m)
          {
              var t = new m.myControl(control.shadowRoot);
          });
      };

      document.registerElement('my-control', {prototype: proto});
  })();
</script>

Now when I use my-control on the index.html the browser complains that it cannot import common.css. Because it search for it using path relative to index.html, not relative to its originall location. I understand this is logical because we have created shadow dom from the script that runs in context of index.html.

My question is: how should I develop my-control custom component that is part of 'core' library that can be reused/distributed in different places and still correctly reference resources like css/images/etc that are also part of the 'core' library.

Thanks in advance.

解决方案

Can you use absolute URLs?

Post /deep/ deprecation same as you, css @injects is the way we have been applying a common styling across our components.

But how to identify path of common style?

First to give some context, we host our components in a single vulcanized html file and clients use html imports to use it in their applications. Now in this imports.html we have included a small script which identifies its own URL using document.currentScript.ownerDocument.baseURI and since we know the path of common css relative of imports.html, we construct this url on the fly and inject constructed style tags containing css @imports inside templates.

That way, when component gets updated(when shadow-root gets attached to it) it makes a call to download common.css(since it knows the absolute url) and uses it inside shadow dom.

So, to summarize don't hardcode style tag with css @import inside template construct it based on your current url of imported html and inject it inside template.

something like this perhaps:

//URL of your html import or script being executed.
var host = document.currentScript.ownerDocument.baseURI;
//splice and dice your host url to get protocol and base url
...
// let's say it is proto and base
var cssURL = proto + base + '/core/css/common.css'
// construct a style tag here with css imports.
// Since you have access to document-fragment coming with html import
// find template and inject this style tag inside it.
// Remember to inject it at top :)

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