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 { css } from "lit"; | |
export const style = css` | |
:host { | |
border: 1px solid black; | |
display: block; | |
width: 100%; | |
padding: 10px; | |
} | |
`; |
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
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} | |
} | |
} |
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%; | |
} | |
} |