Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Let a web component own its base display via :host, not its consumers
A custom element should declare its own base display in :host (custom elements default to display:inline, which is almost always wrong). Consumers should only set layout they specifically need, like width.
Bad example
| 1 | // my-widget.ts — no :host display, so it stays display:inline |
| 2 | class MyWidget extends HTMLElement {} |
| 3 |
|
| 4 | /* every consumer must fix it themselves: */ |
| 5 | my-widget { |
| 6 | display: block; |
| 7 | width: 100%; |
| 8 | } |
Explanation (EN)
The component leaves its base display to consumers, so each one repeats display:block to undo the inline default. The component's own concern leaks into every consumer.
Objašnjenje (HR)
Komponenta prepusta osnovni display korisnicima, pa svaki ponavlja display:block da ponisti inline default. Briga komponente curi u svakog korisnika.
Good example
| 1 | /* my-widget styles (injected into its shadow root) */ |
| 2 | :host { |
| 3 | display: block; |
| 4 | } |
| 5 |
|
| 6 | /* consumer only sets what is genuinely its layout need: */ |
| 7 | my-widget { |
| 8 | width: 100%; |
| 9 | } |
Explanation (EN)
The component owns its base display in :host, so it behaves correctly everywhere. Consumers only override layout that is truly their concern (width).
Objašnjenje (HR)
Komponenta drzi osnovni display u :host, pa se svuda ponasa ispravno. Korisnici nadjacavaju samo layout koji je stvarno njihova briga (width).