fix: simplify footer CSS for embed compatibility, add content guards

- Replace child combinator selectors (> div > div:nth-child) with
  .section:nth-child in footer CSS so styles work regardless of DOM
  nesting depth (normal loadFragment vs aem-embed buildBlock)
- Add textContent guard to footer.js to skip loadFragment when
  aem-embed has already provided content
- Add textContent guard to header.js with fallback nav setup
- Remove nav wrapper from aem-embed handleFooter (copy-paste from
  handleHeader)
- Refactor embed tester to use Preact AemEmbed component with smart
  URL resolution (localhost vs live)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: shsteimer

blocks/footer/footer.css

@@ -19,14 +19,14 @@ footer .footer p {
 }
 
 /* Row 1: Disclaimer */
-footer .footer > div > div:first-child {
+footer .footer .section:first-child {
   padding-bottom: var(--space-m);
   font-size: var(--body-font-size-s);
   font-weight: 400;
 }
 
 /* Row 2: Tagline */
-footer .footer > div > div:nth-child(2) p {
+footer .footer .section:nth-child(2) p {
   font-family: var(--font-family-serif);
   font-weight: 400;
   font-size: var(--body-font-size-s);
@@ -35,13 +35,13 @@ footer .footer > div > div:nth-child(2) p {
 }
 
 /* Row 3: Copyright + social icons (merged) */
-footer .footer > div > div:nth-child(3) {
+footer .footer .section:nth-child(3) {
   margin-top: var(--space-m);
   border-top: 1px solid rgb(255 255 255 / 15%);
   padding-top: var(--space-m);
 }
 
-footer .footer > div > div:nth-child(3) .default-content-wrapper {
+footer .footer .section:nth-child(3) .default-content-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -54,7 +54,7 @@ footer .footer .footer-separator {
   margin-inline: var(--space-xs);
 }
 
-footer .footer > div > div:nth-child(3) ul {
+footer .footer .section:nth-child(3) ul {
   margin: 0;
   padding: 0;
   list-style: none;
@@ -63,21 +63,21 @@ footer .footer > div > div:nth-child(3) ul {
   gap: var(--space-s);
 }
 
-footer .footer > div > div:nth-child(3) li {
+footer .footer .section:nth-child(3) li {
   margin: 0;
 }
 
 footer .footer a:any-link {
   color: var(--color-parchment);
 }
 
-footer .footer > div > div:nth-child(3) ul a {
+footer .footer .section:nth-child(3) ul a {
   text-decoration: none;
   color: inherit;
   opacity: 0.7;
 }
 
-footer .footer > div > div:nth-child(3) ul a:hover {
+footer .footer .section:nth-child(3) ul a:hover {
   opacity: 1;
 }
 

blocks/footer/footer.js

@@ -6,18 +6,20 @@ import { loadFragment } from '../fragment/fragment.js';
  * @param {Element} block The footer block element
  */
 export default async function decorate(block) {
-  // load footer as fragment
-  const footerMeta = getMetadata('footer');
-  const footerPath = footerMeta ? new URL(footerMeta, window.location).pathname : '/footer';
-  const fragment = await loadFragment(footerPath);
+  // load footer as fragment (skip if aem-embed already provided content)
+  if (block.textContent === '') {
+    const footerMeta = getMetadata('footer');
+    const footerPath = footerMeta ? new URL(footerMeta, window.location).pathname : '/footer';
+    const fragment = await loadFragment(footerPath);
 
-  // decorate footer DOM
-  block.textContent = '';
-  const footer = document.createElement('div');
-  while (fragment.firstElementChild) footer.append(fragment.firstElementChild);
+    block.textContent = '';
+    const footer = document.createElement('div');
+    while (fragment.firstElementChild) footer.append(fragment.firstElementChild);
+    block.append(footer);
+  }
 
   // merge social icons into copyright row
-  const sections = footer.querySelectorAll(':scope > .section');
+  const sections = block.querySelectorAll('.section');
   if (sections.length >= 4) {
     const copyrightSection = sections[2];
     const socialSection = sections[3];
@@ -31,6 +33,4 @@ export default async function decorate(block) {
       socialSection.remove();
     }
   }
-
-  block.append(footer);
 }

blocks/fragment/fragment.js

@@ -17,7 +17,7 @@ import dynamicBlocks from '../dynamic/index.js';
 /**
  * Loads a fragment.
  * @param {string} path The path to the fragment
- * @returns {HTMLElement} The root element of the fragment
+ * @returns {Promise<HTMLElement>} The root element of the fragment
  */
 export async function loadFragment(path) {
   if (path && path.startsWith('/') && !path.startsWith('//')) {

blocks/header/header.js

@@ -358,16 +358,26 @@ function toggleMobile(nav, open) {
 const NAV_ITEMS = '.default-content-wrapper > ul > li';
 
 export default async function decorate(block) {
-  const fragment = await loadFragment(getNavPath());
-  if (!fragment) return;
-
-  block.textContent = '';
-  const nav = document.createElement('nav');
-  nav.id = 'nav';
-  nav.setAttribute('aria-label', 'Main');
-  nav.setAttribute('aria-expanded', 'false');
+  // Load nav content (skip if aem-embed already provided content)
+  if (block.textContent === '') {
+    const fragment = await loadFragment(getNavPath());
+    if (!fragment) return;
+
+    block.textContent = '';
+    const nav = document.createElement('nav');
+    nav.id = 'nav';
+    nav.setAttribute('aria-label', 'Main');
+    nav.setAttribute('aria-expanded', 'false');
+
+    while (fragment.firstElementChild) nav.append(fragment.firstElementChild);
+    block.append(nav);
+  }
 
-  while (fragment.firstElementChild) nav.append(fragment.firstElementChild);
+  const nav = block.querySelector('nav');
+  if (!nav) return;
+  if (!nav.id) nav.id = 'nav';
+  if (!nav.getAttribute('aria-label')) nav.setAttribute('aria-label', 'Main');
+  if (!nav.getAttribute('aria-expanded')) nav.setAttribute('aria-expanded', 'false');
 
   ['brand', 'sections', 'tools'].forEach((c, i) => nav.children[i]?.classList.add(`nav-${c}`));
 

scripts/aem-embed.js

@@ -86,9 +86,7 @@ export class AEMEmbed extends HTMLElement {
     footer.append(block);
 
     const cell = block.firstElementChild.firstElementChild;
-    const nav = document.createElement('nav');
-    cell.append(nav);
-    while (main.firstElementChild) nav.append(main.firstElementChild);
+    while (main.firstElementChild) cell.append(main.firstElementChild);
     main.remove();
 
     await this.loadBlock(body, block, 'footer', origin);

tools/embed-tester/embed.html

@@ -9,11 +9,6 @@
   <script type="module" src="./scripts.js"></script>
 </head>
 <body>
-  <aem-embed url="https://feat-embed-content--diyfire--cloudadoption.aem.page/nav" type="header"></aem-embed>
-
   <div id="app"></div>
-
-  <aem-embed url="https://feat-embed-content--diyfire--cloudadoption.aem.page/footer" type="footer"></aem-embed>
-
 </body>
 </html>

tools/embed-tester/scripts.js

@@ -6,7 +6,34 @@ import {
   useEffect,
 } from 'https://esm.sh/htm/preact/standalone';
 
-const BASE_URL = 'https://feat-embed-content--diyfire--cloudadoption.aem.page';
+const LIVE_URL = 'https://main--diyfire--cloudadoption.aem.live';
+
+function getBaseUrl() {
+  const { origin } = window.location;
+  if (origin.includes('localhost')) return origin;
+  return LIVE_URL;
+}
+
+function resolveUrl(path) {
+  if (path.startsWith('http')) return path;
+  const base = getBaseUrl();
+  return `${base}${path.startsWith('/') ? '' : '/'}${path}`;
+}
+
+function AemEmbed({ path, type = 'main' }) {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!path || !ref.current) return;
+    ref.current.replaceChildren();
+    const el = document.createElement('aem-embed');
+    el.setAttribute('url', resolveUrl(path));
+    el.setAttribute('type', type);
+    ref.current.appendChild(el);
+  }, [path, type]);
+
+  return html`<div ref=${ref}></div>`;
+}
 
 function Card({ title, children }) {
   return html`
@@ -51,27 +78,12 @@ function CardGrid() {
 
 function FragmentEmbedder() {
   const [path, setPath] = useState('');
-  const [embedUrl, setEmbedUrl] = useState(null);
-  const previewRef = useRef(null);
-
-  useEffect(() => {
-    if (!embedUrl || !previewRef.current) return;
-    previewRef.current.innerHTML = '';
-    const embed = document.createElement('aem-embed');
-    embed.setAttribute('url', embedUrl);
-    embed.setAttribute('type', 'main');
-    previewRef.current.appendChild(embed);
-  }, [embedUrl]);
+  const [activePath, setActivePath] = useState(null);
 
   const handleEmbed = () => {
     const trimmed = path.trim();
     if (!trimmed) return;
-    const url = trimmed.startsWith('http') ? trimmed : `${BASE_URL}${trimmed.startsWith('/') ? '' : '/'}${trimmed}`;
-    setEmbedUrl(url);
-  };
-
-  const handleKeyDown = (e) => {
-    if (e.key === 'Enter') handleEmbed();
+    setActivePath(trimmed);
   };
 
   return html`
@@ -86,16 +98,18 @@ function FragmentEmbedder() {
             placeholder="/fragments/example or full URL"
             value=${path}
             onInput=${(e) => setPath(e.target.value)}
-            onKeyDown=${handleKeyDown}
+            onKeyDown=${(e) => e.key === 'Enter' && handleEmbed()}
           />
         </div>
         <button onClick=${handleEmbed}>Embed</button>
       </div>
-      <div class="preview-container" ref=${previewRef}>
-        ${!embedUrl && html`<div class="preview-placeholder">Enter a path and click Embed to preview content.</div>`}
+      <div class="preview-container">
+        ${activePath
+    ? html`<${AemEmbed} path=${activePath} />`
+    : html`<div class="preview-placeholder">Enter a path and click Embed to preview content.</div>`}
       </div>
       <p class="hint">
-        Paths are resolved against <code>${BASE_URL}</code>.
+        Paths are resolved against <code>${getBaseUrl()}</code>.
         CORS headers must be configured on the source for cross-origin embedding.
       </p>
     </section>
@@ -104,6 +118,7 @@ function FragmentEmbedder() {
 
 function App() {
   return html`
+    <${AemEmbed} path="/nav" type="header" />
     <main class="app-main">
       <${Hero} />
       <${CardGrid} />
@@ -115,6 +130,7 @@ function App() {
         </p>
       </div>
     </main>
+    <${AemEmbed} path="/footer" type="footer" />
   `;
 }