jhuesos/index.html

## 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>
	<!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>