search

public-ui / kolibri

The accessible HTML-Standard
https://public-ui.github.io
European Union Public License 1.2
173 stars 33 forks source link

Ursache für `style`-Tags in unseren Komponenten im Shadow-Root ermitteln #7056

Closed deleonio closed 1 week ago

deleonio commented 1 week ago

Bei uns ist z.B. beim KolButton, aber nicht beim KolAlert, ein style-Tag im DOM. Bei KERN generell nicht.

image

KoliBri: https://github.com/public-ui/kolibri/tree/develop/packages/samples/react KERN-Repo: https://gitlab.opencode.de/kern-ux/pattern-library/-/tree/chore/multi-theming/packages/sample-app

deleonio commented 1 week ago

Hi @christian-bromann,

weißt Du vielleicht, warum style-Tags im Shadow-Root auftauchen?

Vielen Dank

christian-bromann commented 1 week ago

Styles, die im @Component decorator registriert werden, z.B. durch styleUrl: 'my-component.css' werden im Shadow Root angehangen. Das ist nicht neu und soweit ich weiß schon immer so gewesen.

deleonio commented 1 week ago

Vielen Dank @christian-bromann.

Ich habe ein Update für das Paket adopted-style-sheets gebracht, dass die Style-Tags besser handled.

Die Theming-Engine sieht wieder gut aus ... ich musste allerdings was wichtiges fixen.

Hint: Alle SCSS files müssen immer die style.scss importieren. Dadurch erkennt die Engine, was der Base-Style ist.

@import '../@shared/mixins';
@import '../style';
...

Viele Grüße

deleonio commented 1 week ago

Es ist so weit alles ok damit. Die Style-Tags am Ende der Web Component kommen von der Internal Component und nicht von der Shadow-Komponent. Ein paar Optimierungen waren aber trotzdem dabei.