benrobot/weather-info.html

## weather-info.html
<!doctype html>
<html>
<body>
  <template id="weather-info">
    <style>
      h2 {
        color: red;
      }
    </style>

    <div class="container">
      <p>The weather up in:</p>
      <h2 class="city-name"></h2>
    </div>
  </template>

  <script>

    class WeatherInfo extends HTMLElement {
      constructor() {
        super()

        let tpl = document.currentScript.ownerDocument.getElementById('weather-info')
        let content = tpl.content.cloneNode(true)
        let shadow = this.attachShadow({mode: 'open'})
        shadow.appendChild(content)
      }
    }

    window.customElements.define('weather-info', WeatherInfo)
  </script>
</body>
</html>
	<!doctype html>
	<html>
	<body>
	<template id="weather-info">
	<style>
	h2 {
	color: red;
	}
	</style>

	<div class="container">
	<p>The weather up in:</p>
	<h2 class="city-name"></h2>
	</div>
	</template>

	<script>

	class WeatherInfo extends HTMLElement {
	constructor() {
	super()

	let tpl = document.currentScript.ownerDocument.getElementById('weather-info')
	let content = tpl.content.cloneNode(true)
	let shadow = this.attachShadow({mode: 'open'})
	shadow.appendChild(content)
	}
	}

	window.customElements.define('weather-info', WeatherInfo)
	</script>
	</body>
	</html>