kj kristoferjoseph

## 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>

## wc-slots.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <template id=begin-page-template>
    <h1>Begin Page</h1>
    <begin-content>

## login.js
import html from 'https://registry.begin.com/html'

export default function Login(state={}) {
  return html`
<my-page>
  <my-form>
    <my-input></my-input>
    <my-button>Submit</my-button>
  </my-form>
</my-page>

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

## arc-grammar.js
module.exports = function(hljs) {
    const LITERALS = [
     'true',
     'false',
     'null'
    ].join(' ')
    const BUILTIN = {
      className: 'built_in',
      begin: '^@.*'
    }

## gist:31643839117acf165273e3eac40ba5fa
/* Hemisu Dark */
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #282a36;
}

.hljs-comment,
.hljs-meta {
	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))
	}
	}
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	</head>
	<body>
	<template id="a">
	<style>
	slot {
	// 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>
	import html from 'https://registry.begin.com/html'

	export default function Login(state={}) {
	return html`
	<my-page>
	<my-form>
	<my-input></my-input>
	<my-button>Submit</my-button>
	</my-form>
	</my-page>
	module.exports = function(hljs) {
	const LITERALS = [
	'true',
	'false',
	'null'
	].join(' ')
	const BUILTIN = {
	className: 'built_in',
	begin: '^@.*'
	}
	/* Hemisu Dark */
	.hljs {
	display: block;
	overflow-x: auto;
	padding: 0.5em;
	background: #282a36;
	}

	.hljs-comment,
	.hljs-meta {