kj kristoferjoseph

## as-slots.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

  <begin-heading>
    <h2 slot="header"></h2>

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

  <template id="my-p-template">
    <p>

## my-message.mjs
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()

## text-input.mjs
export default function InputText({ html, state, utils={} }) {
  const { attrs={} } = state
  const {
    description='',
    label='',
    name='',
    pattern='',
    placeholder='',
    value='',
    min='',

## custom-element.mjs
export default class CustomElement extends HTMLElement {
  constructor() {
    super()
      const templateName = `${this.tagName.toLowerCase()}-template`
      const template = document.getElementById(templateName)
      if (template) {
        this.template = template
      }
      else {
        this.template = document.createElement('template')

## element-base.mjs
export default class ElementBase extends HTMLElement {
  constructor() {
    super()
    const name = this.tagName.toLowerCase()
    const template = document.getElementById(`${name}-template`)
    if (template) {
      this.replaceChildren(template.content.cloneNode(true))
    }
  }
}

## multiple-single-file-web-components.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <template id="a">
    <style>
      slot {

## single-file-web-component.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Single File Web Component</title>
</head>
<body>
  <template id=single-file>
    <style>
      h1 {

## main-page.js
// Function name would be the page name
export async function Main(html, data) {
  return html`<my-custom-element todos="${data.todos}"></my-custom-element>`
}

## my-paragraph-nested-test.html
<html>
  <head></head>
  <body>
    <template id=my-paragraph-template>
      <p>
        <slot name="my-text">
          My default text
        </slot>
      </p>
    </template>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	</head>
	<body>

	<begin-heading>
	<h2 slot="header"></h2>
	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()
	export default function InputText({ html, state, utils={} }) {
	const { attrs={} } = state
	const {
	description='',
	label='',
	name='',
	pattern='',
	placeholder='',
	value='',
	min='',
	export default class CustomElement extends HTMLElement {
	constructor() {
	super()
	const templateName = `${this.tagName.toLowerCase()}-template`
	const template = document.getElementById(templateName)
	if (template) {
	this.template = template
	}
	else {
	this.template = document.createElement('template')
	export default class ElementBase extends HTMLElement {
	constructor() {
	super()
	const name = this.tagName.toLowerCase()
	const template = document.getElementById(`${name}-template`)
	if (template) {
	this.replaceChildren(template.content.cloneNode(true))
	}
	}
	}
	// Function name would be the page name
	export async function Main(html, data) {
	return html`<my-custom-element todos="${data.todos}"></my-custom-element>`
	}
	<html>
	<head></head>
	<body>
	<template id=my-paragraph-template>
	<p>
	<slot name="my-text">
	My default text
	</slot>
	</p>
	</template>