Karte 1
Schon da, wenn die Bühne ankommt.
Diese komplette Seite läuft auf UIkit 3 - eigenes Reset, eigene Typografie, eigene Buttons/Cards. Mitten drin: ein <ncss-container> mit echtem NativeCSS-Inhalt (Stacked Cards), per Shadow DOM vollständig isoliert - kein CSS läuft in irgendeine Richtung über die Grenze. Soll UIkit3 stattdessen komplett DURCH ncss ersetzt werden statt nur koexistieren: Von UIkit3 nach ncss (Klassen-Entsprechungen für typische Layouts).
<script src="dist/js/ncss-container.js" defer></script>
<ncss-container src="dist/ncss.css">
<div class="ncss-card">
<div class="ncss-card-body">Isolierter Inhalt</div>
</div>
</ncss-container>uikit.min.css.
Ganz normales .uk-card, außerhalb des Containers.
Margins, Radius, Schatten - alles UIkit-Standard.
Auch Farbvarianten funktionieren normal weiter.
Dieser komplette Block läuft in einem eigenen Shadow Root mit eigener, unveränderter ncss.css - eigene Tokens, eigener Reset, eigene Cascade Layers. UIkits button/h1-h6-Reset erreicht diesen Bereich nicht; ncss' eigener Reset (* { margin: 0 } u.a.) bleibt umgekehrt auf diesen Bereich beschränkt und beeinflusst UIkit oben/unten nicht.
Schon da, wenn die Bühne ankommt.
Fährt beim Weiterscrollen über Karte 1.
Und so weiter, ganz ohne JavaScript-Animation.
Am Ende liegt der ganze Stapel gefächert da.
Rahmen/Radius/Schatten kommen aus helpers/elevation.css, nicht aus UIkit.
Überschriften-Margins, Absatzabstände, Listenpunkte - alles normales UIkit-Verhalten, unverändert durch den ncss-Block weiter oben.