use display: contents for shadow-object host elements

Author: spearwolf

package.json

@@ -32,14 +32,14 @@
     "@nx/eslint-plugin": "^19.5.4",
     "@nx/js": "^19.5.4",
     "@nx/linter": "^19.8.4",
-    "@playwright/test": "^1.56.1",
+    "@playwright/test": "^1.57.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@types/node": "^20.14.11",
     "@types/react": "^18.3.12",
     "@types/sinon": "^17.0.4",
     "@typescript-eslint/eslint-plugin": "^7.17.0",
     "@typescript-eslint/parser": "^7.17.0",
-    "esbuild": "^0.25.12",
+    "esbuild": "^0.27.2",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-astro": "^1.5.0",
@@ -53,10 +53,10 @@
     "lil-gui": "^0.21.0",
     "npm-run-all": "^4.1.5",
     "nx": "^19.3.1",
-    "prettier": "^3.6.2",
+    "prettier": "^3.7.4",
     "prettier-plugin-astro": "^0.14.1",
     "react": "^18.3.1",
-    "rimraf": "^6.1.0",
+    "rimraf": "^6.1.2",
     "sinon": "^18.0.0",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",

packages/shadow-objects/CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to [@spearwolf/shadow-objects](https://github.com/spearwolf/
 The format is loosely based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.25.0] - 2025-12-31
+
+- use `display: contents` style for all shadow object host elements to avoid layout issues
+
 ## [0.24.0] - 2025-11-27
 
 - renamed interface `ShadowObjectParams` to `ShadowObjectCreationAPI` for clarity and consistency with the concept of the _Shadow Object Creation API_

packages/shadow-objects/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spearwolf/shadow-objects",
   "description": "a reactive entity-component framework that feels at home in the shadows",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "author": {
     "name": "Wolfger Schramm",
     "email": "wolfger@spearwolf.de",

packages/shadow-objects/src/elements/ShaeEntElement.ts

@@ -83,6 +83,8 @@ export class ShaeEntElement extends ShaeElement {
         this.syncShadowObjects();
       }
     });
+
+    this.style.display = 'contents';
   }
 
   #unsubscribeViewComponentEffect?: () => void;

packages/shadow-objects/src/elements/ShaePropElement.ts

@@ -316,6 +316,8 @@ export class ShaePropElement extends HTMLElement {
       this.#readTypeAttribute();
       this.#readNoTrimAttribute();
     });
+
+    this.style.display = 'contents';
   }
 
   connectedCallback() {

packages/shadow-objects/src/elements/ShaeWorkerElement.ts

@@ -75,6 +75,8 @@ export class ShaeWorkerElement extends ShaeElement {
 
     this.#createAutoSyncEffect();
     this.#createImportScriptEffect();
+
+    this.style.display = 'contents';
   }
 
   #createImportScriptEffect() {