Skip to content

Instantly share code, notes, and snippets.

View kristoferjoseph's full-sized avatar
🐈‍⬛

kj kristoferjoseph

🐈‍⬛
789 followers · 29 following
View GitHub Profile
@kristoferjoseph
kristoferjoseph / index.html
Last active May 2, 2024 18:04
Default content for unnamed slot with a declarative shadow dom quirks
<!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. -->
@kristoferjoseph
kristoferjoseph / index.html
Created March 14, 2024 02:48
Declarative Shadow DOM Playground
<!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>
@kristoferjoseph
kristoferjoseph / counter-state.html
Created March 6, 2024 17:28
Counter component using Enhance element and attributes
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
@kristoferjoseph
kristoferjoseph / counter.html
Last active March 6, 2024 18:29
Enhance element counter example using the store. Exposes the store via window.store. Update the count with window.store.count = 8
<!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>
@kristoferjoseph
kristoferjoseph / styles.css
Created October 25, 2023 04:38
enhance styles light, dark, accent, error
/**
* 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%;
@kristoferjoseph
kristoferjoseph / my-message.mjs
Created May 18, 2023 15:44
My message Shadow DOM edition
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
<!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
<!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 November 28, 2023 19:30
Single file MyMessage Custom Element pure function that enables adding tags dynamically in the browser with JavaScript
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
export default function InputText({ html, state, utils={} }) {
const { attrs={} } = state
const {
description='',
label='',
name='',
pattern='',
placeholder='',
value='',
min='',