ebidel/ce.js

## ce.js
'use strict';

customElements.define('x-hello', class extends HTMLElement {
  static get observedAttributes() {
    return ['name'];
  }
  constructor() {
    super();
  }
  attributeChangedCallback(attrName, oldVal, newVal) {
    if (attrName === 'name') {
      this.textContent = `Hello ${newVal}`;
    }
  }
});

## custom_elements_first_render.html
<!--
In response to http://framework-test.netlify.com/.

Custom elements are super fast. Those that build their app with care will
be rewarded in the after life.

Deets: Renders a component that shows "Hello World" in < 350ms in Chrome 56, Regular 3G emulation.
It could be faster by inlining the JS, removing the blocking stylesheet.
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="author" content="Eric Bidelman">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vanilla Custom Elements Bootup</title>
    <link rel="stylesheet" href="http://framework-test.netlify.com/css/index.css">
  </head>
  <body>
    <main id="customelements">
      <h1>Vanilla Custom Elements Bootup</h1>
      <p>static render</p>
      <x-hello name="world">
        <!-- could have fallback content here if JS is slow or doesn't run. -->
      </x-hello>
    </main>
    <script src="ce.js" defer></script>
  </body>
</html>
	'use strict';

	customElements.define('x-hello', class extends HTMLElement {
	static get observedAttributes() {
	return ['name'];
	}
	constructor() {
	super();
	}
	attributeChangedCallback(attrName, oldVal, newVal) {
	if (attrName === 'name') {
	this.textContent = `Hello ${newVal}`;
	}
	}
	});
	<!--
	In response to http://framework-test.netlify.com/.

	Custom elements are super fast. Those that build their app with care will
	be rewarded in the after life.

	Deets: Renders a component that shows "Hello World" in < 350ms in Chrome 56, Regular 3G emulation.
	It could be faster by inlining the JS, removing the blocking stylesheet.
	-->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
	<meta name="author" content="Eric Bidelman">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Vanilla Custom Elements Bootup</title>
	<link rel="stylesheet" href="http://framework-test.netlify.com/css/index.css">
	</head>
	<body>
	<main id="customelements">
	<h1>Vanilla Custom Elements Bootup</h1>
	<p>static render</p>
	<x-hello name="world">
	<!-- could have fallback content here if JS is slow or doesn't run. -->
	</x-hello>
	</main>
	<script src="ce.js" defer></script>
	</body>
	</html>