Westbrook Johnson Westbrook
Westbrook
/ lit-use-effect-element.js
Last active
September 3, 2023 23:18
useEffect() for `LitElement`... because everyone's doing it?
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
| import {LitElement, html} from '@polymer/lit-element'; | |
| import {UseEffectMixin} from './use-effect.js'; | |
| class MyElement extends UseEffectMixin(LitElement) { | |
| static get properties() { | |
| return { | |
| mood: {type: String}, | |
| expression: {type: String} | |
| } | |
| } |
Westbrook
/ LitComponent.css.ts
Created
May 8, 2023 03:54
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
| import { css } from "lit"; | |
| export const style = css` | |
| :host { | |
| border: 1px solid black; | |
| display: block; | |
| width: 100%; | |
| padding: 10px; | |
| } | |
| `; |
Westbrook
/ index.html
Created
May 8, 2023 03:54
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> | |
| <head> | |
| <script type="module" src="./simple-greeting.js"></script> | |
| </head> | |
| <body> | |
| <simple-greeting name="World"></simple-greeting> | |
| </body> |
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
| import htm from 'https://unpkg.com/htm?module'; // for parity of renderer plus access to element properties | |
| const handler = (e) => console.log("You've got an event at the parent level:",e); | |
| const eventToComponent = htm`<MyComponent onSomething=${handler} />`; | |
| const eventToCustomElement = htm`<my-component onSomething=${handler} />`; | |
| // OR, you can use capturing to manage this sort of thing via central data store | |
| document.body.addEventListener('something', e => { |
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
| // ---- | |
| // libsass (v0.7.0) | |
| // ---- | |
| %extended { | |
| border: none; | |
| } | |
| %extend { | |
| width: 100%; |
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
| // ---- | |
| // libsass (v0.7.0) | |
| // ---- | |
| %extend { | |
| @media only screen and (max-width: 600px) { | |
| width:100%; | |
| } | |
| } |