Skip to content

Instantly share code, notes, and snippets.

@jhuesos

jhuesos/index.html

Created September 7, 2018 08:07
Show Gist options
  • Save jhuesos/d169e6d3c57f36e7516182a1300dff97 to your computer and use it in GitHub Desktop.
Save jhuesos/d169e6d3c57f36e7516182a1300dff97 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html>
<head>
<!-- Polyfills only needed for Firefox and Edge. -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>
</head>
<body>
<h1>LitElement/LitHTML replaces getter/setter</h1>
<p>if it works as expected, it should say bellow <code>Status: status from child</code></p>
<hr>
<my-element></my-element>
<script type="module">
import { LitElement, html } from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';
class MyElement extends LitElement {
_render() {
return html`<sub-element status=${'anyValue'}></sub-element>`;
}
}
class SubElement extends LitElement {
constructor() {
super();
this.__status = 'status from child';
}
get status() {
console.log('status comes from here');
return this.__status;
}
set status(value) {
console.log('status setter is called');
}
_render() {
return html`<div>Status: ${this.status}</div>`;
}
}
customElements.define('my-element', MyElement);
customElements.define('sub-element', SubElement);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment