public static class ScopedStylesTurns a component's stylesheet into one that only reaches its own elements.
No guide page documents this yet — the page shows what the code says about itself.
Remarks
A class on every element the component built, and the same class welded onto the end of every selector. .row { … } becomes .row.v-1f2e { … }, and only elements this component created carry v-1f2e — so a component's .row cannot style a caller's .row that happens to be inside it, which is the whole content of scoped.
⚠ Welded to the end rather than prefixed to the front. A descendant prefix — .v-1f2e .row — reads as the obvious implementation and is wrong twice: it misses the component's own root, which is the element a stylesheet most often wants, and it matches a caller's .row projected into a slot, which is exactly what scoping is supposed to stop.
⚠ The scope is per type, not per instance. Every instance of a component shares one class, because they share one stylesheet — a per-instance scope would mean a rule set per row of a list, which is the cost that made the unscoped version worth fixing.
⚠ Nothing inside @keyframes is touched. Its blocks are keyed by from, to and percentages, which are not selectors — appending a class to 50% produces a rule that parses and never matches, and the animation quietly loses its middle.
Methods (2)
public static string ScopeOf(Type component)The class a component's elements carry, derived from its type.
public static string Scope(string css, string scope)Rewrites a stylesheet so that every rule in it also asks for the scope class.
Used by (2)
- ComponentVixen.Ui
- ScopedStyleTestsVixen.Ui.Tests