javascript - 动态主题和 Polymer 2

Question

我正在尝试使用聚合物 2 进行动态主题

我希望能够加载包含主题的外部 html 文件，例如

<custom-style>
<style>
/* my theme setup */
</style>
</custom-style>

我已经整理了一个存储库，概述了我所做的尝试。

https://github.com/moodyjmz/ang4-p2-theming

到目前为止，我已经有了一个稍微有点 hacky 的解决方案，将 import-href 注入(inject)其中，以便使用 shadyCSS 来获取它。这种方法虽然感觉不对，但在 x 浏览器上工作得很好，但与 Angular 4 填充冲突。我可以通过将最终构建的 index.html 修改为仅在 Web 组件 polyfill 准备就绪后加载 Angular 来解决此问题。

但是，我宁愿不这样做，而是有一个依赖于较少黑客方法的解决方案

Answer 1

使用

this.updateStyles({
  '--app-foo-style': red,
  '--app-bar-style': `12px`,
});