kj kristoferjoseph
🦇
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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
/ counter-state.html
Created
March 6, 2024 17:28
Counter component using Enhance element and attributes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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
/ 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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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
/ styles.css
Created
October 25, 2023 04:38
enhance styles light, dark, accent, error
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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%; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| </head> | |
| <body> | |
| <begin-heading> | |
| <h2 slot="header"></h2> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| </head> | |
| <body> | |
| <template id="my-p-template"> | |
| <p> |
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export default function InputText({ html, state, utils={} }) { | |
| const { attrs={} } = state | |
| const { | |
| description='', | |
| label='', | |
| name='', | |
| pattern='', | |
| placeholder='', | |
| value='', | |
| min='', |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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') |
NewerOlder