Polymer 1.0-在ajax响应后对自定义元素应用动态样式

我有一个自定义元素，它有两类样式，静态和动态。静态样式存在于模块

…

中，但动态样式需要存在于它们自己的样式表中，然后在必要时加载

自定义元素将有一些语法为

color:var（--dynamic element color）

的样式，然后在一些ajax东西确定了一个客户端之后，我将获取该客户端的样式表，并以某种方式包含它以更新混合样式…可能通过

@import url（client-1.html）

结合

Polymer.updateStyles（）

如有必要

我尝试了两种方法：

1） 在自定义元素的方法中-这种方法的某些形式在Chrome中有效，但在其他地方无效：

ready: function() {
    this.determineClientStyle('test');
},
determineClientStyle: function(client) {
    var link = document.createElement('link');
    link.rel = 'import';
    link.href = '/elements/'+client+'/linus.html';
    var beforeNode = Polymer.dom(this.root).childNodes[0];
    Polymer.dom(this.root).insertBefore(link, beforeNode);
}

2） 在index.html中-使用Chrome和FF，但不使用Safari或我手机的“internet”浏览器：

我的真实项目有许多自定义元素，所有这些元素都将具有

var（--some style）

的样式，我希望加载一个导入，在每个客户机的基础上实现它们

我还没有成功地完成@Abhinav在下面提到的内容……要么是因为我对它的理解不正确，要么就是因为我做得不对

---

做这件事最好的方法是什么？

我在这里看到两个问题：

1.页面上的样式泄漏 您不希望您的样式泄漏到页面上，但很可能您没有使用shadow dom，因为从Polymer 1.0开始是默认的，它不提供样式封装。
通过调整全局聚合，可以强制聚合使用阴影dom

关于这个话题，我写了一些描述性的回答。
希望能有帮助

---

编辑

document.currentScript.ownerDocument

返回当前正在执行脚本的文档

现在，组件可能存在于两个地方

主（当前）文档
在这种情况下，

document.currentScript.ownerDocument

将返回当前文档，您可以从中获取模板。但是您在这里并不真正需要它，因为您可以直接执行

document.querySelector

，然后向其附加样式标记或执行任何您想要的操作

导入的文档
现在这是一个麻烦，因为您的模板不在当前页面上，所以

document.querySelector

无法获取该模板。
因此，现在有两种方法可以将样式标记附加到它，这两种方法将根据要执行此操作的位置而有所不同

a。就绪方法：当客户端标识符存在时，您希望在就绪方法中执行此操作

很好，这里也不需要

document.currentScript.ownerDocument

，因为您可以查询链接标记并使用导入属性从中获取内容。
大概是这样的：

<link id="myImport" rel="import" href="my-components.html">

b。导入的HTML:不！我想在那之前就做。实际上，当我的内容被导入页面时，我想这样做

好的。你在这里唯一的选择是。。。等等。。。是的，你猜对了<代码>文档.currentScript.ownerDocument
在HTML导入中引用这个漂亮的代码

导入不在主文档中。他们是它的卫星。然而， 即使主页面 文件至高无上。导入可以访问自己的DOM和/或 导入它的页面的DOM

导入中的脚本引用导入的文档 （document.currentScript.ownerDocument）

我希望您的用例位于上述三种可能性之一。
最后，阴影根目录应该包含一个样式标记，带有css@import，它应该指向css文件的正确位置。

---

如果这是真的，样式将加载到页面上，并且将仅应用于阴影根中。

我不理解您的描述性答案。您能否提供一些具体的代码，说明如何将添加样式表注入到自定义元素中？我已经用代码片段更新了我的答案。如果需要的话，还有一个答案可以提供更多的细节。你能看看我在问题中更新的代码片段，告诉我这是否是正确的地方和方法吗？此就绪方法属于将使用样式的自定义元素。此外，我可以看到，

style

被添加为

myTemplate

的子节点，但我不确定这就是我想要的。我还注意到，如果自定义元素代码位于单独的文件中并正在导入，document.currentScript.ownerDocument将无法工作。我建议您进行上次编辑。它起作用了吗？我已经用您关于

document.currentScript.ownerDocument

<script>
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = 'shadow';
</script>

//If you are using html imports to bring in your components on page.
//doc will contain html which is being imported.
var doc = document.currentScript.ownerDocument;

// Fetch template from doc
var myTemplate = doc.querySelector('template#myTemplate');
var cssURL = '/elements/'+client+'/dynamic_style_1.css';
// construct a style tag here with css @imports which contain above css url.
// Since you have access to template in myTemplate
// inject this style tag inside it.
// Since it is a css @import, Remember to inject it at top(using insertBefore)

<link id="myImport" rel="import" href="my-components.html">

//This is what goes inside ready method
var linkTag = document.querySelector('#myImport');
var importContent = linkTag.import;
var myTemplate = importContents.querySelector('#myTemplate');
//Yayy!! You have your template. Now go ahead and inject a style tag into it.