動態主題化和聚合物2

我希望能夠加載包含主題外部HTML文件，如

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

我已經把回購一起給我一個我嘗試的概述。

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

到目前爲止，我已經得到了注射進口HREF中，使其拿起與shadyCSS稍微哈克的解決方案。這種方法雖然感覺不對，但能夠很好地工作在瀏覽器上，但與角度爲4的polyfills相沖突。我可以通過修改最終構建index.html來解決此問題，以便在Web組件填充準備好之後僅加載角度。

不過，我寧願不這樣做，有依靠少哈克的方式

來源

2017-08-03 moodyjmz

使用

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

來源

2017-08-04 15:31:37

，而這將爲簡單的使用情況下工作的解決方案，我要動態地應用它如果不是成千上萬的角色，其他元素和插槽內的css規則和元素， – moodyjmz

目前我正在轉向webpack構建，維護我關心的元素列表，並使用'ShadyCSS.styleSubtree（el）'迭代它。例如在元件 '''的js ... 就緒（）{ super.ready（）; window.elList？ window.elList.push（this）：window.elList = [this]; } ... ''' 在主題切換器 - 當通過importHref檢測並加載一個主題 - 回調會做： '''JS 如果（window.elList）{ window.elList。 forEach（function（el）{ShadyCSS.styleSubtree（el）; }）; } ''' – moodyjmz

動態主題化和聚合物2

回答

相關問題