u2ui 1.5.0 → 1.5.2

package/el/accordion/accordion.js

@@ -1,17 +1,15 @@
+import U2Element from '../../u2/Element.js';
 
-const icoCssUrl = import.meta.resolve('../../el/ico/ico.css');
 
-export default class U2Accordion extends HTMLElement {
+export default class U2Accordion extends U2Element {
 
     constructor() {
         super();
 
-        import('../ico/ico.js');
-
         let shadowRoot = this.attachShadow({ mode: 'open', slotAssignment: 'manual' });
+        this.useEl('ico');
         shadowRoot.innerHTML = `
         <style>
-        @import url('${icoCssUrl}');
         :host {
             display:block;
             gap:.5em;
@@ -208,4 +206,4 @@ export default class U2Accordion extends HTMLElement {
     }
 }
 
-customElements.define('u2-accordion', U2Accordion);
+customElements.get('u2-accordion') || customElements.define('u2-accordion', U2Accordion);

package/el/alert/alert.js

@@ -1,8 +1,6 @@
-
-const icoCssUrl = import.meta.resolve('../../el/ico/ico.css');
+import U2Element from '../../u2/Element.js';
 
 const style = `
-@import url('${icoCssUrl}');
 :host(:not([dismissable]))::part(close) { display:none; } /* TODO: does not work in chrome */
 :host {
     --u2-ico-dir:var(--u2-ico-dir-material);
@@ -80,14 +78,13 @@ slot[name=icon] {
 /* slot[name=action]:empty-slot { display:none; } not possible */`;
 
 
-export default class U2Alert extends HTMLElement {
+export default class U2Alert extends U2Element {
     constructor() {
         super();
  
-        import('../../attr/focusgroup/focusgroup.js');
-        import('../ico/ico.js');
-
         this.attachShadow({mode: 'open'});
+        this.useEl('ico');
+        this.useAttr('focusgroup');
         this.shadowRoot.innerHTML = `
             <style>${style}</style>
             <div id=container>
@@ -163,7 +160,7 @@ const variantData = {
     }
 };
 
-customElements.define('u2-alert', U2Alert);
+customElements.get('u2-alert') || customElements.define('u2-alert', U2Alert);
 
 function alert(message, variant, options={}) {
     const el = document.createElement('u2-alert');

package/el/breadcrumb/breadcrumb.js

@@ -116,4 +116,4 @@ export default class U2Breadcrumb extends HTMLElement {
     }
 }
 
-customElements.define('u2-breadcrumb', U2Breadcrumb);
+customElements.get('u2-breadcrumb') || customElements.define('u2-breadcrumb', U2Breadcrumb);

package/el/buttongroup/buttongroup.js

@@ -65,4 +65,4 @@ export default class U2Buttongroup extends HTMLElement {
     }
 
 }
-customElements.define('u2-buttongroup', U2Buttongroup);
+customElements.get('u2-buttongroup') || customElements.define('u2-buttongroup', U2Buttongroup);

package/el/bytes/bytes.js

@@ -54,7 +54,7 @@ export default class U2Bytes extends HTMLElement {
     }
 }
 
-customElements.define('u2-bytes', U2Bytes);
+customElements.get('u2-bytes') || customElements.define('u2-bytes', U2Bytes);
 
 
 function localesFromElement(el) {

package/el/calendar/calendar.js

@@ -1,5 +1,6 @@
+import U2Element from '../../u2/Element.js';
 
-export default class U2Calendar extends HTMLElement {
+export default class U2Calendar extends U2Element {
   static observedAttributes = ['view', 'date', 'lang'];
 
   constructor() {
@@ -8,12 +9,10 @@ export default class U2Calendar extends HTMLElement {
     this._currentDate = new Date();
     this._locale = null;
     this._weekStart = 0; // 0 = Sunday .. 6 = Saturday
-    import('../ico/ico.js');
-    const icoCssUrl = import.meta.resolve('../ico/ico.css');
+    this.useEl('ico');
 
     this.shadowRoot.innerHTML = `
       <style>
-        @import url('${icoCssUrl}');
         :host {
           display: flex;
           flex-direction: column;
@@ -295,7 +294,7 @@ export default class U2Calendar extends HTMLElement {
 
 
 
-class U2CalendarItem extends HTMLElement {
+class U2CalendarItem extends U2Element {
   static observedAttributes = ['start', 'end'];
 
   constructor() {
@@ -387,5 +386,5 @@ function getTimeFormatter(localeTag, options = { hour: '2-digit', minute: '2-dig
 }
 
 
-customElements.define('u2-calendar', U2Calendar);
-customElements.define('u2-calendaritem', U2CalendarItem);
+customElements.get('u2-calendar') || customElements.define('u2-calendar', U2Calendar);
+customElements.get('u2-calendaritem') || customElements.define('u2-calendaritem', U2CalendarItem);

package/el/carousel/carousel.js

@@ -321,7 +321,7 @@ U2Carousel.mode.fade = {
 }
 
 
-customElements.define('u2-carousel', U2Carousel)
+customElements.get('u2-carousel') || customElements.define('u2-carousel', U2Carousel)
 
 
 // slide on target

package/el/carousel-nav/carousel-nav.js

@@ -71,4 +71,4 @@ export default class U2CarouselNav extends HTMLElement {
 		})
 	}
 }
-customElements.define('u2-carousel-nav', U2CarouselNav)
+customElements.get('u2-carousel-nav') || customElements.define('u2-carousel-nav', U2CarouselNav)

package/el/chart/chart.js

@@ -185,4 +185,4 @@ function getHSLofElement(el) {
 }
 
 
-customElements.define('u2-chart', U2Chart);
+customElements.get('u2-chart') || customElements.define('u2-chart', U2Chart);

package/el/code/code.js

@@ -197,7 +197,7 @@ export default class U2Code extends HTMLElement {
 
 }
 
-customElements.define('u2-code', U2Code);
+customElements.get('u2-code') || customElements.define('u2-code', U2Code);
 
 
 function trimCode(value){

package/el/cookiebanner/cookiebanner.js

@@ -55,7 +55,7 @@ function getCookie() {
   }
 }
 
-customElements.define('u2-cookiebanner', U2Cookiebanner);
+customElements.get('u2-cookiebanner') || customElements.define('u2-cookiebanner', U2Cookiebanner);
 
 
 

package/el/copy/copy.js

@@ -87,4 +87,4 @@ export default class U2Copy extends HTMLElement {
     }
 }
 
-customElements.define('u2-copy', U2Copy);
+customElements.get('u2-copy') || customElements.define('u2-copy', U2Copy);

package/el/counter/counter.js

@@ -93,4 +93,4 @@ function format(el, val){
     }).format(val);
 }
 
-customElements.define('u2-counter', U2Counter)
+customElements.get('u2-counter') || customElements.define('u2-counter', U2Counter)

package/el/drawer/drawer.js

@@ -163,4 +163,4 @@ export default class U2Drawer extends HTMLElement {
 }
 
 // Register custom element
-customElements.define('u2-drawer', U2Drawer);
+customElements.get('u2-drawer') || customElements.define('u2-drawer', U2Drawer);

package/el/fields/fields.js

@@ -1,8 +1,9 @@
-export default class U2Fields extends HTMLElement {
+import U2Element from '../../u2/Element.js';
+export default class U2Fields extends U2Element {
     constructor() {
         super();
         this.attachShadow({ mode: 'open', slotAssignment: 'manual' });
-        import('../responsive/responsive.js');
+        this.useEl('responsive');
 
         this.shadowRoot.innerHTML = `
             <style>
@@ -11,7 +12,7 @@ export default class U2Fields extends HTMLElement {
                     margin-block:.5rem;
                     white-space:nowrap;
                 }
-                u2-responsive {
+                #container { /* out-specify responsive.css, which useEl now adopts */
                     display: grid;
                     align-items:baseline;
                     grid-template-columns: auto 1fr;
@@ -130,4 +131,4 @@ export default class U2Fields extends HTMLElement {
 
 }
 
-customElements.define('u2-fields', U2Fields);
+customElements.get('u2-fields') || customElements.define('u2-fields', U2Fields);

package/el/ico/ico.js

@@ -160,4 +160,4 @@ async function loadCached(url) {
 }
 
 
-customElements.define('u2-ico', U2Ico);
+customElements.get('u2-ico') || customElements.define('u2-ico', U2Ico);

package/el/input/input.js

@@ -1,3 +1,4 @@
+import U2Element from '../../u2/Element.js';
 // Type-Handler mit Lifecycle
 class TypeHandler {
     constructor(element, shadow) {
@@ -288,7 +289,6 @@ class FileHandler extends TypeHandler {
     }
     get css() {
         return `
-      @import url('${import.meta.resolve('../../class/badge/badge.css')}');
       :host { vertical-align: top; }
       #droparea {
         flex: 1 1 auto;
@@ -334,7 +334,8 @@ class FileHandler extends TypeHandler {
     }
 
     init() {
-        import('../bytes/bytes.js');
+        this.element.useEl('bytes');
+        this.element.useClass('badge');
 
         const browse = this.shadow.getElementById('browse');
 
@@ -433,15 +434,13 @@ const TYPE_REGISTRY = {
 };
 
 // Custom Element
-export default class U2Input extends HTMLElement {
+export default class U2Input extends U2Element {
     constructor() {
         super();
-        import('../ico/ico.js');
-
         const shadow = this.attachShadow({ mode: 'open', delegatesFocus: true });
+        this.useEl('ico');
         shadow.innerHTML = `
       <style>
-        @import url('${import.meta.resolve('../ico/ico.css')}');
         
         :host {
           display: inline-block;
@@ -665,7 +664,7 @@ export default class U2Input extends HTMLElement {
     $(selector) { return this.shadowRoot.querySelector(selector); }
 
 }
-customElements.define('u2-input', U2Input);
+customElements.get('u2-input') || customElements.define('u2-input', U2Input);
 
 // Globales File-Drag-Feedback
 document.addEventListener('dragenter', e => {

package/el/maintitlebar/maintitlebar.js

@@ -14,4 +14,4 @@ export default class U2Maintitlebar extends HTMLElement {
         navigator.windowControlsOverlay?.removeEventListener('geometrychange', this._check);
     }
 }
-customElements.define('u2-maintitlebar', U2Maintitlebar);
+customElements.get('u2-maintitlebar') || customElements.define('u2-maintitlebar', U2Maintitlebar);

package/el/masonry/masonry.js

@@ -44,7 +44,7 @@ export default class U2Masonry extends HTMLElement{
     }    
 }
 
-customElements.define('u2-masonry', U2Masonry);
+customElements.get('u2-masonry') || customElements.define('u2-masonry', U2Masonry);
 
 
 function sortByHeight(a, b){

package/el/menubutton/menubutton.js

@@ -73,7 +73,7 @@ export default class U2Menubutton extends HTMLElement {
         });
     }
 }
-customElements.define('u2-menubutton', U2Menubutton);
+customElements.get('u2-menubutton') || customElements.define('u2-menubutton', U2Menubutton);
 
 
 function nextFocusable(root) {

package/el/number/number.js

@@ -58,7 +58,7 @@ export default class U2Number extends HTMLElement {
     }
 }
 
-customElements.define('u2-number', U2Number);
+customElements.get('u2-number') || customElements.define('u2-number', U2Number);
 
 function localesFromElement(el) {
     let langEl = el.closest('[lang]')||document.documentElement;

package/el/out/out.js

@@ -39,4 +39,4 @@ export default class U2Out extends HTMLElement {
 
 }
 
-customElements.define('u2-out', U2Out);
+customElements.get('u2-out') || customElements.define('u2-out', U2Out);

package/el/pagination/pagination.js

@@ -144,4 +144,4 @@ export default class U2Pagination extends HTMLElement {
     }
 }
 
-customElements.define('u2-pagination', U2Pagination);
+customElements.get('u2-pagination') || customElements.define('u2-pagination', U2Pagination);

package/el/parallax-bg/parallax-bg.js

@@ -194,4 +194,4 @@ export default class U2ParallaxBg extends HTMLElement {
     }
 }
 
-customElements.define('u2-parallax-bg', U2ParallaxBg)
+customElements.get('u2-parallax-bg') || customElements.define('u2-parallax-bg', U2ParallaxBg)

package/el/qrcode/qrcode.js

@@ -35,7 +35,7 @@ export default class U2Qrcode extends HTMLElement {
     }
 
 }
-customElements.define('u2-qrcode', U2Qrcode);
+customElements.get('u2-qrcode') || customElements.define('u2-qrcode', U2Qrcode);
 
 function toSvgString(qr) {
     const border = 0;

package/el/rating/rating.js

@@ -1,7 +1,6 @@
-const icoCssUrl = import.meta.resolve('../../el/ico/ico.css');
+import U2Element from '../../u2/Element.js';
 
 const style = `
-@import url('${icoCssUrl}');
 :host {
     --u2-ico-dir: var(--u2-ico-dir-material);
     --color-inactive:#ccc;
@@ -25,15 +24,14 @@ const style = `
 }
 `;
 
-export default class U2Rating extends HTMLElement {
+export default class U2Rating extends U2Element {
     static formAssociated = true;
     #value = null;
     constructor() {
         super();
 
-        import('../ico/ico.js');
-
         this.attachShadow({mode: 'open'});
+        this.useEl('ico');
         this.shadowRoot.innerHTML = `
             <style>${style}</style>
             <div id=stars></div>
@@ -145,4 +143,4 @@ function translate(text) {
     return texts[text][lang] ?? texts[text].en;
 }
 
-customElements.define('u2-rating', U2Rating);
+customElements.get('u2-rating') || customElements.define('u2-rating', U2Rating);

package/el/responsive/responsive.js

@@ -123,7 +123,7 @@ export default class U2Responsive extends HTMLElement {
     }
 }
 
-customElements.define('u2-responsive', U2Responsive);
+customElements.get('u2-responsive') || customElements.define('u2-responsive', U2Responsive);
 
 
 

package/el/rte/rte.js

@@ -44,7 +44,7 @@ export default class U2Rte extends HTMLElement {
     }
 }
 
-customElements.define('u2-rte', U2Rte);
+customElements.get('u2-rte') || customElements.define('u2-rte', U2Rte);
 
 
 // import Showdown from 'https://cdn.skypack.dev/showdown';

package/el/skeleton/skeleton.js

@@ -21,7 +21,7 @@ export default class U2Skeleton extends HTMLElement {
     }
 }
 
-customElements.define('u2-skeleton', U2Skeleton);
+customElements.get('u2-skeleton') || customElements.define('u2-skeleton', U2Skeleton);
 
 
 

package/el/splitpanel/splitpanel.js

@@ -114,4 +114,4 @@ export default class U2Splitpanel extends HTMLElement {
     }
 }
 
-customElements.define('u2-splitpanel', U2Splitpanel);
+customElements.get('u2-splitpanel') || customElements.define('u2-splitpanel', U2Splitpanel);

package/el/spot/spot.js

@@ -103,4 +103,4 @@ export default class U2Spot extends HTMLElement {
     }
 }
 
-customElements.define('u2-spot', U2Spot);
+customElements.get('u2-spot') || customElements.define('u2-spot', U2Spot);

package/el/system/styler.js

@@ -572,7 +572,7 @@ class ColorSystemStyler extends HTMLElement {
     }
 }
 
-customElements.define('u2-system-styler', ColorSystemStyler);
+customElements.get('u2-system-styler') || customElements.define('u2-system-styler', ColorSystemStyler);
 
 
 

package/el/system/system.js

@@ -68,7 +68,7 @@ export default class U2System extends HTMLElement {
 
 }
 
-customElements.define('u2-system', U2System);
+customElements.get('u2-system') || customElements.define('u2-system', U2System);
 
 addEventListener('keydown', (e) => {
     if (e.target.form !== undefined) return;

package/el/table/table.js

@@ -465,4 +465,4 @@ class Column {
     }
 }
 
-customElements.define('u2-table', U2Table);
+customElements.get('u2-table') || customElements.define('u2-table', U2Table);

package/el/tabs/tabs.js

@@ -162,7 +162,7 @@ export default class U2Tabs extends HTMLElement {
     }
 
 }
-customElements.define('u2-tabs', U2Tabs);
+customElements.get('u2-tabs') || customElements.define('u2-tabs', U2Tabs);
 
 // beta, does not work if initial u2-target is already fired
 // problem: sometimes, on initial load, the event is fired before the listener is added

package/el/textfit/textfit.js

@@ -77,4 +77,4 @@ export default class U2Textfit extends HTMLElement {
     }
 }
 
-customElements.define('u2-textfit', U2Textfit);
+customElements.get('u2-textfit') || customElements.define('u2-textfit', U2Textfit);

package/el/time/time.js

@@ -176,4 +176,4 @@ const ensureOption = (val, ...options) => {
     return options[0];
 }
 
-customElements.define('u2-time', U2Time);
+customElements.get('u2-time') || customElements.define('u2-time', U2Time);

package/el/toc/toc.js

@@ -84,4 +84,4 @@ export default class U2Toc extends HTMLElement {
     }
 }
 
-customElements.define('u2-toc', U2Toc);
+customElements.get('u2-toc') || customElements.define('u2-toc', U2Toc);

package/el/tooltip/tooltip.js

@@ -67,7 +67,7 @@ export default class U2Tooltip extends HTMLElement {
     }
     static observedAttributes = ['position'];
 }
-customElements.define('u2-tooltip', U2Tooltip);
+customElements.get('u2-tooltip') || customElements.define('u2-tooltip', U2Tooltip);
 
 
 document.addEventListener('mouseenter',function(e){

package/el/tree/tree.js

@@ -233,4 +233,4 @@ export default class U2Tree extends HTMLElement {
     }
 }
 
-customElements.define('u2-tree', U2Tree);
+customElements.get('u2-tree') || customElements.define('u2-tree', U2Tree);

package/el/typewriter/typewriter.js

@@ -100,7 +100,7 @@ export default class U2Typewriter extends HTMLElement {
     }
 
 }
-customElements.define('u2-typewriter', U2Typewriter);
+customElements.get('u2-typewriter') || customElements.define('u2-typewriter', U2Typewriter);
 
 
 // find the next Char in children or sibling of the node but not outside the root

package/el/video/video.js

@@ -483,7 +483,7 @@ const svg = {
     fastRewind: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11 16.07V7.93c0-.81-.91-1.28-1.58-.82l-5.77 4.07c-.56.4-.56 1.24 0 1.63l5.77 4.07c.67.47 1.58 0 1.58-.81zm1.66-3.25l5.77 4.07c.66.47 1.58-.01 1.58-.82V7.93c0-.81-.91-1.28-1.58-.82l-5.77 4.07a1 1 0 0 0 0 1.64z"></path></svg>',
 }
 
-customElements.define('u2-video', U2Video);
+customElements.get('u2-video') || customElements.define('u2-video', U2Video);
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "u2ui",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "HTML Advanced: More Capabilities, Same Feel, Same Simplicity",
   "keywords": ["web-components","pattern-library","component-library","ui-toolkit","design-system"],
   "author": "Tobias Buschor",

package/u2/Element.js

@@ -0,0 +1,37 @@
+import { sheet } from './utils.js';
+
+const base = new URL('../', import.meta.url).href; // this copy of u2
+
+/** Base class for u2 elements — keeps a subtree on one u2 version.
+    A scoped shadow root only resolves tags its own registry knows, and a shadow opened
+    without the option silently falls back to the global one. Inheriting it instead means
+    nesting composes: whatever version enhanced the root stays the version all the way down. */
+export default class U2Element extends HTMLElement {
+
+    attachShadow(options) {
+        return super.attachShadow({customElementRegistry: this.customElementRegistry, ...options});
+    }
+
+    useEl(name, options)    { return use(this, 'el', name, options); }
+    useClass(name, options) { return use(this, 'class', name, options); }
+    useAttr(name, options)  { return use(this, 'attr', name, options); }
+}
+
+/** Bring what a child needs into this element's shadow. Both start at once — the css is the
+    part that shows, it must not wait for a module. Defaults follow the category: an el has
+    both, a class is css only, an attr is js only — `u2-skin` is the attr that styles, and it
+    stays an attr because it carries a value: useAttr('skin', {css:true}). */
+function use(el, category, name, {css = category !== 'attr', js = category !== 'class'} = {}) {
+    const path = `${base}${category}/${name}/${name}`;
+    const warn = err => console.warn('u2: could not load', category + '/' + name, err);
+    // unshift, not push: the element's own styles are adopted after these and have to keep
+    // winning ties, no matter when the child's sheet arrives.
+    if (css) sheet(path + '.css').then(s => el.shadowRoot.adoptedStyleSheets.unshift(s), warn);
+    if (!js) return;
+    return import(path + '.js').then(mod => {
+        if (category !== 'el') return; // a class has no js, an attr installs itself
+        const registry = el.customElementRegistry ?? customElements;
+        const tag = 'u2-' + name;
+        registry.get(tag) || registry.define(tag, mod.default);
+    }, warn);
+}

package/u2/enhance.js

@@ -9,29 +9,18 @@ document it stays a <link>, so the page keeps its say over u2's own rules.
 See ./plan-scoped-refactoring.md */
 
 import { repos } from './u2.js';
-import { importCss } from './utils.js';
+import { importCss, sheet } from './utils.js';
 
 const base = new URL('../', import.meta.url).href; // this copy of u2 — another root may run another
 const scoped = 'customElementRegistry' in ShadowRoot.prototype;
 // The default scope: module identity gives one per u2 version, so a caller who does not care
 // gets isolation for free. A caller who brings its own wins, and the elements follow the root.
 const versionRegistry = scoped ? new CustomElementRegistry() : undefined;
-const sheets = new Map(); // url -> Promise<CSSStyleSheet>, shared across roots
 
 // the manifest is wanted by every load, so fetch it on import and keep the resolved map
 let projects = null;
 repos().then(map => projects = map);
 
-function sheet(url) {
-    if (!sheets.has(url)) {
-        sheets.set(url, fetch(url).then(r => r.text()).then(css => {
-            const s = new CSSStyleSheet();
-            s.replaceSync(css); // u2 css has no relative url() and no @import
-            return s;
-        }));
-    }
-    return sheets.get(url);
-}
 
 /** Attach a shadow root that runs its own u2. Same signature as the native method. */
 export function attachShadow(host, options = {}) {

package/u2/plan-scoped-refactoring.md

@@ -263,14 +263,9 @@ Erst ab **Phase 3** relevant:
 
 ## Offen / später
 
-- **`U2Element` als Basisklasse** (wenn sie kommt) nimmt den Elementen die Registry-Arbeit ab:
-  `attachShadow(options)` überschreiben und `customElementRegistry: this.customElementRegistry`
-  vorbelegen — dann bleiben alle Aufrufstellen wie heute. Dazu ein Einzeiler für Kind-Elemente,
-  etwa `this.registerElement('ico')`: importiert die Klasse, definiert sie in die eigene
-  Registry **und adoptiert `ico.css` ins eigene Shadow**. Beides steht heute von Hand in jedem
-  Modul, und `fields` vergisst die CSS von `responsive` bereits. Async ist unkritisch — ein
-  Element upgraded auch, wenn es erst nach dem `innerHTML` definiert wird.
-  Ein `createElement`-Helper lohnt nicht: `innerHTML` benutzt ohnehin die Registry des Shadows.
+- **Die übrigen 36 Elemente auf `U2Element`.** Solange eines `extends HTMLElement` bleibt, fällt
+  sein Shadow auf `window.customElements` zurück, sobald es doch mal ein u2-Element rendert.
+  Mechanisch, aber 36 Dateien.
 - **Attribute sind kein Registry-Problem.** Sie kollidieren nicht über Namen, sie
   *installieren sich doppelt*, wenn zwei u2-Kopien laufen. Alle 10 hängen ihre Listener an
   `document`, vier davon (`confirm`, `dropzone`, `draghandle`, `movable`) benutzen
@@ -278,4 +273,65 @@ Erst ab **Phase 3** relevant:
   Scope zu binden würde sie kaputtmachen.
   Zu klären ist deshalb nicht „wie scopen wir", sondern zweierlei: **einmal pro Dokument**
   installieren, und **pro Modul** entscheiden, welche Wirkung wirklich subtree-lokal ist.
+
+## Erledigt in 1.5.2 — `U2Element`
+
+[`u2/Element.js`](Element.js): Basisklasse, die den Elementen die Registry-Arbeit abnimmt.
+`attachShadow()` belegt `customElementRegistry: this.customElementRegistry` vor — alle
+Aufrufstellen bleiben dadurch **wortgleich wie vorher**. `this.useEl(name)` importiert
+`el/<name>/<name>.js` und definiert die Klasse in die eigene Registry (`?? customElements`).
+Async ist unkritisch: ein Element upgraded auch, wenn es erst nach dem `innerHTML` definiert wird.
+
+Dazu `useClass(name)` und `useAttr(name)`. Alle drei holen ausserdem die **CSS ins eigene Shadow** —
+u2-Elemente haben meist kein eigenes Shadow (`ico` schreibt sein SVG ins Light DOM, `ico.css` stylt
+`u2-ico { … }` von aussen), CSS gehört deshalb immer dem Root, in dem das Kind steht. Der Vater
+musste sie bisher von Hand per `@import` holen, und `fields` vergass `responsive.css` dabei.
+
+**Keine Deklaration am Kind.** Ein `static hasCss` müsste erst per JS geladen werden, bevor die CSS
+überhaupt startet — es macht den wichtigeren Request garantiert langsamer. `projects.json` wäre
+ebenfalls erst ein Fetch (und ist Enhance-Territorium). Also beides parallel, bedingungslos, und die
+Defaults kommen aus der Kategorie — dieselben wie in `enhance`:
+
+| | js | css | Dateien |
+|---|---|---|---|
+| `el` | ja | ja | js 41/41, css 37/41 |
+| `class` | **nein** | ja | js 0/8, css 8/8 |
+| `attr` | ja | **nein** | js 15/16, css 1/16 |
+
+Die Ausreisser gehören an die *Aufrufstelle*, nicht als Feld an alle 41 Elemente:
+`useAttr('skin', {css:true})`. `skin` bleibt dauerhaft ein Attribut, weil es einen Wert trägt —
+als Klasse ginge das erst mit einem Selektor wie `.u2-class-*`.
+
+**Reihenfolge:** adoptierte Sheets kommen *nach* den Tree-Styles, die Kind-CSS würde also die
+Overrides des Vaters schlagen. `use()` macht darum `unshift`, nicht `push` — sobald der `<style>`
+eines Vaters auch mal adoptiert wird, steht er hinter den Kindern, unabhängig davon, wann deren
+Sheet eintrifft. Solange der Vater ein Tree-`<style>` hat, muss er die Kind-Regeln
+**überspezifizieren**. Ein echter Fall bestand: `fields` überschrieb `u2-responsive {display:block}`
+mit `u2-responsive {display:grid}` — Gleichstand, jetzt `#container`.
+
+Die sechs Module, die u2-Elemente in ihr *eigenes* Shadow rendern:
+
+| Modul | Kind |
+|---|---|
+| `alert`, `accordion`, `calendar`, `rating` | `ico` |
+| `input` | `ico`, `bytes` |
+| `fields` | `responsive` |
+
+```js
+export default class U2Alert extends U2Element {
+    constructor() {
+        super();
+        this.attachShadow({mode: 'open'});   // erbt die Registry
+        this.useEl('ico');                   // Klasse in die Registry + ico.css ins Shadow
+        this.useAttr('focusgroup');          // nur js
+```
+
+Ausserhalb eines scoped Roots ist `this.customElementRegistry` `undefined`, die Option gilt als
+abwesend und `useEl()` fällt auf `customElements` zurück — Verhalten unverändert.
+
+Nicht betroffen, bewusst: **Attribute** (`focusgroup`, `draghandle`, `dropzone`, …) sind kein
+Registry-Thema; `table` erzeugt sein `u2-ico` im **Light DOM**, wo `enhance` es ohnehin sieht;
+`input`s `u2-badge` ist eine *Klasse*, kein Tag; `tree`s `u2-ico` ist auskommentiert.
+`U2CalendarItem` erbt `U2Element` mit, obwohl sein Shadow heute keine Custom Elements enthält.
+
 - Scoped-Verkettung von Kind-Elementen in die Eltern-Registry (siehe „Interne Deps").

package/u2/utils.js

@@ -59,3 +59,20 @@ function rootGetStyleWrapper(root) {
     }
     return styleWrapper;
 }
+
+
+///////////////////////////
+// stylesheets
+
+const sheets = new Map();
+/** One parsed CSSStyleSheet per url, shared by every root that adopts it. */
+export function sheet(url) {
+    if (!sheets.has(url)) {
+        sheets.set(url, fetch(url).then(r => r.text()).then(css => {
+            const s = new CSSStyleSheet();
+            s.replaceSync(css); // u2 css has no relative url() and no @import
+            return s;
+        }));
+    }
+    return sheets.get(url);
+}