fix(web): markdown should pre-set slot

.changeset/rich-teams-melt.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-elements": patch
+---
+
+fix: x-markdown inline view injection no longer queries light DOM children when the content attribute changes. Consumers must now pre-set `slot="{id}"` on the child element they want to project into `inlineview://{id}`.

packages/web-platform/web-elements/src/elements/XMarkdown/XMarkdownAttributes.ts

@@ -1285,23 +1285,12 @@ export class XMarkdownAttributes {
         const inlineId = img.getAttribute('data-inlineview');
         if (inlineId) {
           const id = inlineId;
-          const view = this.#dom.querySelector(`#${CSS.escape(id)}`);
-          if (view) {
-            const container = document.createElement('span');
-            container.className = 'md-inline-view';
-            const vAlign = (view as HTMLElement).getAttribute('vertical-align')
-              || (view as HTMLElement).style.verticalAlign
-              || '';
-            if (vAlign) {
-              (container.style as any).verticalAlign = vAlign;
-            }
-            const slot = document.createElement('slot');
-            const slotName = `md-inline-view-${id}`;
-            slot.name = slotName;
-            (view as HTMLElement).slot = slotName;
-            container.appendChild(slot);
-            img.replaceWith(container);
-          }
+          const container = document.createElement('span');
+          container.className = 'md-inline-view';
+          const slot = document.createElement('slot');
+          slot.name = `md-inline-view-${id}`;
+          container.appendChild(slot);
+          img.replaceWith(container);
         }
       }
     } catch {

packages/web-platform/web-elements/tests/fixtures/x-markdown/inlineview-class.html

@@ -18,7 +18,11 @@
     <script src="/main.js" defer></script>
     <x-view class="page">
       <x-markdown id="markdown" style="width: 300px">
-        <x-view id="content-view" class="content"></x-view>
+        <x-view
+          id="content-view"
+          slot="md-inline-view-content-view"
+          class="content"
+        ></x-view>
       </x-markdown>
     </x-view>
     <script>

packages/web-platform/web-elements/tests/fixtures/x-markdown/inlineview.html

@@ -12,7 +12,7 @@
       <x-markdown id="markdown" style="width: 300px">
         <x-view
           id="badge"
-          vertical-align="middle"
+          slot="md-inline-view-badge"
           style="display: inline-block; width: 10px; height: 10px; background: rgb(255, 0, 0)"
         ></x-view>
       </x-markdown>

packages/web-platform/web-elements/tests/x-markdown.spec.ts

@@ -1,3 +1,3 @@
 import { test, expect } from '@lynx-js/playwright-fixtures';
 import type { Page } from '@playwright/test';
 
@@ -94,7 +94,7 @@
     await goto(page, 'x-markdown/basic');
     const markdown = page.locator('x-markdown');
 
     await expect(markdown.locator('h1')).toHaveText('Title');
     await expect(markdown.locator('strong')).toHaveText('bold');
     await expect(markdown.locator('em')).toHaveText('italic');
     await expect(markdown.locator('li')).toHaveCount(2);
@@ -104,7 +104,7 @@
   test('should apply markdown-style updates', async ({ page }) => {
     await goto(page, 'x-markdown/style');
     const markdown = page.locator('x-markdown');
     await page.waitForFunction(() => {
       const element = document.querySelector('x-markdown');
       return element?.shadowRoot?.querySelector('a')?.textContent === 'link';
     });
@@ -140,7 +140,7 @@
     });
 
     expect(propertyValue).toEqual({ link: { color: '00ff00' } });
     await expect(link).toHaveCSS('color', 'rgb(0, 255, 0)');
     await expect(markdown).toHaveAttribute(
       'markdown-style',
       JSON.stringify({ link: { color: '00ff00' } }),
@@ -152,7 +152,7 @@
     const markdown = page.locator('x-markdown');
 
     const image = markdown.locator('img');
     await expect(image).toHaveAttribute(
       'src',
       '/tests/fixtures/resources/firefox-logo.png',
     );
@@ -165,7 +165,7 @@
     await markdown.evaluate((el) => {
       el.setAttribute('content', '# Updated');
     });
     await expect(markdown.locator('h1')).toHaveText('Updated');
   });
 
   test('should only allow span and p html tags in markdown content', async ({ page }) => {
@@ -173,7 +173,7 @@
     const markdown = page.locator('x-markdown');
 
     const span = markdown.locator('span.mark-red');
     await expect(span).toHaveText('World');
     await expect(span).not.toHaveAttribute('style', /.+/);
     await expect(span).not.toHaveAttribute('onclick', /.+/);
 
@@ -191,7 +191,7 @@
     await goto(page, 'x-markdown/events');
     const markdown = page.locator('x-markdown');
 
     await markdown.locator('a').click();
     await page.waitForFunction(() => (window as any)._bindlink_detail !== null);
     const linkDetail = await page.evaluate(() =>
       (window as any)._bindlink_detail
@@ -617,22 +617,24 @@
     ]);
   });
 
-  test('should inject inline view and keep vertical-align', async ({ page }) => {
+  test('should inject inline view via pre-set slot', async ({ page }) => {
     await goto(page, 'x-markdown/inlineview');
     await page.waitForFunction(() => {
       const el = document.querySelector('x-markdown');
       const root = el && (el as any).shadowRoot;
       return !!root && !!root.querySelector('.md-inline-view');
     });
-    const va = await page.evaluate(() => {
+    const projected = await page.evaluate(() => {
       const el = document.querySelector('x-markdown')!;
       const root = el.shadowRoot as ShadowRoot;
-      const inline = root.querySelector('.md-inline-view') as
-        | HTMLElement
-        | null;
-      return inline ? getComputedStyle(inline).verticalAlign : '';
+      const slot = root.querySelector(
+        '.md-inline-view slot',
+      ) as HTMLSlotElement | null;
+      return slot?.assignedElements().some((node) =>
+        (node as HTMLElement).id === 'badge'
+      ) ?? false;
     });
-    expect(va).toBe('middle');
+    expect(projected).toBe(true);
   });
 
   test('should apply class styles to inline view', async ({ page }) => {