Stop using container units

gordonbrander · gordonbrander · commit 77836f6373a3 · 2024-06-20T11:11:38.000-07:00
...Unfortunately they do not work across slot boundaries. The container unit is sized by the light dom container, not the shadow dom container. See w3c/csswg-drafts#5984 Solution: use percentage units instead. Oddly enough, these do work across shadow boundaries.
diff --git a/typescript/packages/lookslike-sagas/index.html b/typescript/packages/lookslike-sagas/index.html
@@ -10,7 +10,7 @@
 <body class="theme">
     <common-screen>
         <common-app>
-            <common-vstack pad="md" gap="md">
+            <common-list>
                 <common-media src="example/mitchell-orr-jQqR2xGkesc-unsplash.jpg">
                     Hello!
                 </common-media>
@@ -29,7 +29,7 @@
                 <common-media src="example/mitchell-orr-jQqR2xGkesc-unsplash.jpg">
                     Hello!
                 </common-media>
-            </common-vstack>
+            </common-list>
             <div slot="secondary">
                 <common-suggestion>
                     Buy milk
diff --git a/typescript/packages/lookslike-sagas/src/components/app.ts b/typescript/packages/lookslike-sagas/src/components/app.ts
@@ -9,11 +9,14 @@ export class AppElement extends LitElement {
     css`
     :host {
       display: block;
+      height: 100%;
+      width: 100%;
     }
 
     .app {
-      height: 100cqh;
       display: grid;
+      height: 100%;
+      width: 100%;
       grid-template-columns: 1fr;
       grid-template-rows: 1fr min-content min-content;
       grid-template-areas:
@@ -32,10 +35,12 @@ export class AppElement extends LitElement {
     
     .app-secondary {
       grid-area: secondary;  
+      container-type: inline-size;
     }
     
     .app-search {
       grid-area: search;
+      container-type: inline-size;
       background-color: var(--secondary-background);
       display: block;
       padding: var(--gap);
@@ -47,9 +52,7 @@ export class AppElement extends LitElement {
     return html`
     <div class="app">
       <main class="app-primary">
-        <common-scroll>
-          <slot></slot>
-        </common-scroll>
+        <slot></slot>
       </main>
       <nav class="app-secondary">
         <slot name="secondary"></slot>
diff --git a/typescript/packages/lookslike-sagas/src/components/layout/list.ts b/typescript/packages/lookslike-sagas/src/components/layout/list.ts
@@ -0,0 +1,27 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+import { baseStyles } from "../style.js";
+
+@customElement("common-list")
+export class CommonListElement extends LitElement {
+  static override styles = [
+    baseStyles,
+    css`
+    :host {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+    `
+  ];
+
+  override render() {
+    return html`
+      <common-scroll>
+        <common-vstack gap="md" pad="md">
+          <slot></slot>
+        </common-vstack>
+      </common-scroll>
+    `;
+  }
+}
diff --git a/typescript/packages/lookslike-sagas/src/components/layout/scroll.ts b/typescript/packages/lookslike-sagas/src/components/layout/scroll.ts
@@ -9,12 +9,15 @@ export class ScrollElement extends LitElement {
     css`
     :host {
       display: block;
+      height: 100%;
+      width: 100%;
     }
 
     .scroll {
       overflow-y: auto;
       overflow-x: hidden;
-      height: 100cqh;
+      height: 100%;
+      width: 100%;
       container-type: size;
       container-name: scroll;
     }
diff --git a/typescript/packages/lookslike-sagas/src/main.ts b/typescript/packages/lookslike-sagas/src/main.ts
@@ -2,6 +2,7 @@ export { ScrollElement } from './components/layout/scroll.js';
 export { ScreenElement } from './components/layout/screen.js';
 export { VstackElement } from './components/layout/vstack.js';
 export { HstackElement } from './components/layout/hstack.js';
+export { CommonListElement } from './components/layout/list.js';
 export { MediaElement } from './components/common/media.js';
 export { ImgElement } from './components/common/img.js';
 export { ButtonElement } from './components/common/button.js';
