Re-enable custom element test and fix "undefined" child (#3095)

* Re-enable custom element test and fix "undefined" child

* Remove outdated comment

* Adds a changeset

.changeset/neat-oranges-tan.md

@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/webapi': patch
+---
+
+Fixes rendering of "undefined" on custom element children

packages/astro/src/core/config.ts

@@ -329,9 +329,9 @@ function resolveFlags(flags: Partial<Flags>): CLIFlags {
 		config: typeof flags.config === 'string' ? flags.config : undefined,
 		host:
 			typeof flags.host === 'string' || typeof flags.host === 'boolean' ? flags.host : undefined,
-		experimentalSsr: typeof flags.experimentalSsr === 'boolean' ? flags.experimentalSsr : false,
+		experimentalSsr: typeof flags.experimentalSsr === 'boolean' ? flags.experimentalSsr : undefined,
 		experimentalIntegrations:
-			typeof flags.experimentalIntegrations === 'boolean' ? flags.experimentalIntegrations : false,
+			typeof flags.experimentalIntegrations === 'boolean' ? flags.experimentalIntegrations : undefined,
 		drafts: typeof flags.drafts === 'boolean' ? flags.drafts : false,
 	};
 }

packages/astro/src/runtime/server/index.ts

@@ -290,7 +290,7 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr
 			await render`<${Component}${spreadAttributes(props)}${markHTMLString(
 				(children == null || children == '') && voidElementNames.test(Component)
 					? `/>`
-					: `>${children}</${Component}>`
+					: `>${children == null ? '' : children}</${Component}>`
 			)}`
 		);
 	}

packages/astro/test/custom-elements.test.js

@@ -1,25 +1,23 @@
 import { expect } from 'chai';
-import cheerio from 'cheerio';
+import { load as cheerioLoad } from 'cheerio';
 import { loadFixture } from './test-utils.js';
 
-// TODO(fks): This seemed to test a custom renderer, but it seemed to be a copy
+describe('Custom Elements', () => {
-// fixture of lit. Should this be moved into a publicly published integration now,
-// and then tested as an example? Or, should we just remove. Skipping now
-// to tackle later, since our lit tests cover similar code paths.
-describe.skip('Custom Elements', () => {
 	let fixture;
 
 	before(async () => {
 		fixture = await loadFixture({
 			root: './fixtures/custom-elements/',
-			intergrations: ['@test/custom-element-renderer'],
+			experimental: {
+				integrations: true
+			}
 		});
 		await fixture.build();
 	});
 
 	it('Work as constructors', async () => {
 		const html = await fixture.readFile('/ctr/index.html');
-		const $ = cheerio.load(html);
+		const $ = cheerioLoad(html);
 
 		// test 1: Element rendered
 		expect($('my-element')).to.have.lengthOf(1);
@@ -30,7 +28,7 @@ describe.skip('Custom Elements', () => {
 
 	it('Works with exported tagName', async () => {
 		const html = await fixture.readFile('/index.html');
-		const $ = cheerio.load(html);
+		const $ = cheerioLoad(html);
 
 		// test 1: Element rendered
 		expect($('my-element')).to.have.lengthOf(1);
@@ -41,7 +39,7 @@ describe.skip('Custom Elements', () => {
 
 	it('Hydration works with exported tagName', async () => {
 		const html = await fixture.readFile('/load/index.html');
-		const $ = cheerio.load(html);
+		const $ = cheerioLoad(html);
 
 		// SSR
 		// test 1: Element rendered
@@ -52,27 +50,22 @@ describe.skip('Custom Elements', () => {
 
 		// Hydration
 		// test 3: Component and polyfill scripts bundled separately
-		expect($('script[type=module]')).to.have.lengthOf(2);
-	});
-
-	it('Polyfills are added even if not hydrating', async () => {
-		const html = await fixture.readFile('/index.html');
-		const $ = cheerio.load(html);
-
 		expect($('script[type=module]')).to.have.lengthOf(1);
 	});
 
 	it('Custom elements not claimed by renderer are rendered as regular HTML', async () => {
 		const html = await fixture.readFile('/nossr/index.html');
-		const $ = cheerio.load(html);
+		const $ = cheerioLoad(html);
 
 		// test 1: Rendered the client-only element
 		expect($('client-element')).to.have.lengthOf(1);
+		// No children
+		expect($('client-element').text()).to.equal('');
 	});
 
 	it('Can import a client-only element that is nested in JSX', async () => {
 		const html = await fixture.readFile('/nested/index.html');
-		const $ = cheerio.load(html);
+		const $ = cheerioLoad(html);
 
 		// test 1: Element rendered
 		expect($('client-only-element')).to.have.lengthOf(1);

packages/astro/test/fixtures/custom-elements/astro.config.mjs

@@ -0,0 +1,9 @@
+import { defineConfig } from 'astro/config';
+import ceIntegration from '@test/custom-element-renderer';
+
+export default defineConfig({
+	integrations: [ceIntegration()],
+	experimental: {
+		integrations: true
+	}
+})

packages/astro/test/fixtures/custom-elements/my-component-lib/index.js

@@ -1,18 +1,31 @@
-export default {
+function getViteConfiguration() {
-  name: '@test/custom-element-renderer',
-  server: './server.js',
-  polyfills: [
-    './polyfill.js'
-  ],
-  hydrationPolyfills: [
-    './hydration-polyfill.js'
-  ],
-  viteConfig() {
 	return {
 		optimizeDeps: {
 			include: ['@test/custom-element-renderer/polyfill.js', '@test/custom-element-renderer/hydration-polyfill.js'],
 			exclude: ['@test/custom-element-renderer/server.js']
-      }
+		},
-    }
-  }
 	};
+}
+
+export default function () {
+	return {
+		name: '@test/custom-element-renderer',
+		hooks: {
+			'astro:config:setup': ({ updateConfig, addRenderer, injectScript }) => {
+				// Inject the necessary polyfills on every page
+				injectScript('head-inline', `import '@test/custom-element-renderer/polyfill.js';`);
+				// Inject the hydration code, before a component is hydrated.
+				injectScript('before-hydration', `import '@test/custom-element-renderer/hydration-polyfill.js';`);
+				// Add the lit renderer so that Astro can understand lit components.
+				addRenderer({
+					name: '@test/custom-element-renderer',
+					serverEntrypoint: '@test/custom-element-renderer/server.js',
+				});
+				// Update the vite configuration.
+				updateConfig({
+					vite: getViteConfiguration(),
+				});
+			},
+		},
+	};
+}

packages/astro/test/fixtures/custom-elements/my-component-lib/server.js

@@ -1,5 +1,3 @@
-import './shim.js';
-
 function getConstructor(Component) {
   if (typeof Component === 'string') {
     const tagName = Component;

packages/webapi/src/lib/CustomElementRegistry.ts

@@ -26,6 +26,11 @@ export class CustomElementRegistry {
 		if (!/-/.test(name))
 			throw new SyntaxError('Custom element name must contain a hyphen')
 
+		_.INTERNALS.set(constructor, {
+			attributes: {},
+			localName: name,
+		} as any)
+
 		internals.constructorByName.set(name, constructor)
 		internals.nameByConstructor.set(constructor, name)
 

packages/webapi/src/lib/Element.ts

@@ -1,6 +1,21 @@
 import * as _ from './utils'
 
 export class Element extends Node {
+	constructor() {
+		super();
+		
+		if(_.INTERNALS.has(new.target)) {
+			const internals = _.internalsOf(new.target, 'Element', 'localName')
+			_.INTERNALS.set(this, {
+				attributes: {},
+				localName: internals.localName,
+				ownerDocument: this.ownerDocument,
+				shadowInit: null as unknown as ShadowRootInit,
+				shadowRoot: null as unknown as ShadowRoot,
+			} as ElementInternals)
+		}
+	}
+
 	hasAttribute(name: string): boolean {
 		void name