Rules Hub
Coding Rules Library
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
frontend ruleP1universalStack: Web Components
web-componentsperformancedomstyles
Share a single stylesheet across many web-component instances
Injecting a <style> per component instance multiplies identical style nodes in the DOM. Create one shared stylesheet (e.g. a constructable/adopted stylesheet) reused by all instances.
PR: hegnar-components · org-mining-hist-2026-06Created: Jun 18, 2026
Bad example
Old codetypescript
| 1 | render() { |
| 2 | this.shadowRoot.innerHTML = `<style>${css}</style>...`; // duplicated 1000x |
| 3 | } |
Explanation (EN)
Objašnjenje (HR)
Good example
New codetypescript
| 1 | const sheet = new CSSStyleSheet(); |
| 2 | sheet.replaceSync(css); // built once, module-level |
| 3 |
|
| 4 | render() { |
| 5 | this.shadowRoot.adoptedStyleSheets = [sheet]; // shared by all instances |
| 6 | } |
Explanation (EN)
Objašnjenje (HR)