Why this fires¶
This is a warning, not a hard error — it never fails the build. Hermetic scoping creates the "dead rule" category: every compound of a scoped selector is stamped with the component's class, so a selector that names a class, id, or tag the component's own markup never produces can match nothing — silently. The compiler parses the selector and the markup together, so it can tell you at the typo, with a suggestion when a close name exists (edit distance ≤ 2):
fn TodoCard() -> View {
<div class="card done">
<span class="title">t</span>
<style>.tittle { font-weight: 600 }</style>
</div>
}
// warning[TE735]: selector `.tittle` matches no element of this component
// help: did you mean `.title`? this component renders: .card, .done, .title:root under scope is structurally impossible — it becomes :root.zc-<hash>, and the document root never carries a component stamp — so it warns even when everything else is dynamic:
<style>:root { color-scheme: dark }</style>
// warning[TE735]: selector `:root` matches no element of this component
// help: a scoped sheet can never target the document root; use `<style global>` or `:global(:root)`When it stays silent¶
This warning never guesses. Any dynamic producer opens the matching set and suppresses it: a non-literal class={expr} (for classes), a non-literal id= (for ids), any el(...)/raw(...) call (for everything). Compounds inside :global(…), compounds containing &, and keyframe selectors (from/50%) are exempt, exactly like the scope transform itself exempts them.
Fix it¶
Rename the selector to the real class, or — if the rule is intentionally app-wide — move it to a <style global> block or wrap it in :global(…).