Dynamische Theming und Polymer 2

Ich versuche, dynamisch Thema mit Polymer 2Dynamische Theming und Polymer 2

Ich möchte eine externe HTML-Datei können, laden Sie das Thema enthält, zB

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

Ich habe ein setzen Repo geben zusammen einen Überblick über das, was ich versucht habe.

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

Bisher habe ich in so eine etwas hacky Lösung Injektion des Import-href bekam, dass es mit shadyCSS aufgenommen wird. Dieser Ansatz, der sich falsch anfühlt, funktioniert gut x Browser, aber konfligiert mit eckigen 4 Polyfills. Ich kann dies beheben, indem ich den finalen Build index.html so modifiziere, dass nur eckig geladen wird, nachdem die Webkomponenten polyfill fertig sind.

Allerdings würde ich es vorziehen, dies nicht zu tun und eine Lösung, die

Quelle

2017-08-03 moodyjmz

Nutzung während dieses

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

Quelle

2017-08-04 15:31:37

für einfache Anwendungsfälle funktionieren würde, auf einen weniger hacky Ansatz beruht, ich will es dynamisch anwenden über Hunderte, wenn nicht Tausende von CSS-Regeln und -Elementen in eckigen, anderen Elementen und in Slots. – moodyjmz

Momentan wende ich mich einem Webpack-Build zu, wobei ich eine Liste von Elementen behalte, die mir wichtig sind, und diese mit 'ShadyCSS.styleSubtree (el)' iteriere. zB Auf dem Element '' 'js ... bereit() { super.ready(); window.elList? window.elList.push (this): window.elList = [this]; } ... '' ' Zum Thema Switcher - wenn ein Thema erkannt und geladen über importHref - der Rückruf tun würde: ' '' js if (window.elList) { window.elList. forEach (Funktion (el)) { ShadyCSS.styleSubtree (el); }); } '' ' – moodyjmz

Dynamische Theming und Polymer 2

Antwort

Verwandte Themen