kj kristoferjoseph

@enhance/html-test

Browser-based HTML test runner with TAP output for testing Declarative Shadow DOM and enhance-dsd generated HTML.

This guide provides a comprehensive, test-driven approach to building modern web applications using:

Frontend: Web Components with Declarative Shadow DOM for true encapsulation and reusability
Backend: Architect Framework for serverless AWS infrastructure with minimal configuration
Testing: node-tap for TAP-compliant unit testing with excellent TypeScript support
Workflow: Agentic test-driven development with small, verifiable iteration steps

	<!DOCTYPE html>
	<html lang="en" data-theme="auto">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Design System 808</title>
	<style>
	/* ============================================
	PARAMETRIC DESIGN TOKENS
	============================================ */

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Decalarative Shadow DOM default slot with default content</title>
	</head>
	<body>

	<!-- This specific markup is needed to render the default content in the unnamed slot inside the template shadowroot. -->
	<!-- adding any spaces or new lines between 'my-button' and 'template' will cause the default slot content not to render. -->

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Declarative Shadow DOM Playground</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>

	<my-paragraph>


	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title></title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title></title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>

	<my-counter count=5></my-counter>

	/**
	* For more information please see the documentation at : https://github.com/enhance-dev/enhance-styles#readme
	*/


	/* Theme Colors */
	:root {
	--accent-h: 208;
	--accent-s: 100%;
	--accent-l: 43%;

	export default function MyMessage({ html, state }) {
	const { attrs } = state
	const { message='' } = attrs
	return html`
	<h1>${ message }</h1>

	<script type="module">
	class MyMessage extends HTMLElement {
	constructor() {
	super()