Skip to content

Instantly share code, notes, and snippets.

Avatar
🚀
The precipice of greatness

kj kristoferjoseph

🚀
The precipice of greatness
View GitHub Profile
View 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')
View 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))
}
}
}
@kristoferjoseph
kristoferjoseph / multiple-single-file-web-components.html
Last active Nov 12, 2021
Multiple single file Web Components
View 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 {
View 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 {
@kristoferjoseph
kristoferjoseph / main-page.js
Last active Aug 31, 2021
Enhance page api dream boat
View 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>`
}
View 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>
@kristoferjoseph
kristoferjoseph / wc-slots.html
Last active Jul 23, 2021
Test for slot overrides.
View 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>
View 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>
@kristoferjoseph
kristoferjoseph / index.html
Created Mar 1, 2021
Color scale prototype
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<main>
<color-scale>
<form
@kristoferjoseph
kristoferjoseph / arc-grammar.js
Created Dec 4, 2020
Architect arc format grammar for Highlightjs
View arc-grammar.js
module.exports = function(hljs) {
const LITERALS = [
'true',
'false',
'null'
].join(' ')
const BUILTIN = {
className: 'built_in',
begin: '^@.*'
}