Skip to content

Instantly share code, notes, and snippets.

View kristoferjoseph's full-sized avatar
👩‍🚀
coming up with more future proof unpopular opinions

kj kristoferjoseph

👩‍🚀
coming up with more future proof unpopular opinions
View GitHub Profile
@kristoferjoseph
kristoferjoseph / my-message.mjs
Created May 18, 2023 15:44
My message Shadow DOM edition
View 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()
@kristoferjoseph
kristoferjoseph / as-slots.html
Created October 25, 2022 20:49
as attribute example
View as-slots.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<begin-heading>
<h2 slot="header"></h2>
@kristoferjoseph
kristoferjoseph / index.html
Created August 23, 2022 20:47
Nested Custom Element Slots
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<template id="my-p-template">
<p>
@kristoferjoseph
kristoferjoseph / my-message.mjs
Last active May 18, 2023 15:39
Single file MyMessage Custom Element pure function that enables adding tags dynamically in the browser with JavaScript
View 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()
@kristoferjoseph
kristoferjoseph / text-input.mjs
Created August 12, 2022 20:50
text input prototype
View text-input.mjs
export default function InputText({ html, state, utils={} }) {
const { attrs={} } = state
const {
description='',
label='',
name='',
pattern='',
placeholder='',
value='',
min='',
@kristoferjoseph
kristoferjoseph / custom-element.mjs
Last active August 6, 2022 19:10
CustomElement Base
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 November 12, 2021 23:03
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 {
@kristoferjoseph
kristoferjoseph / single-file-web-component.html
Last active May 2, 2023 12:39
Single file Web Component
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 August 31, 2021 20:06
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>`
}