itsMattShull/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <title>How to use the Custom Elements v1 + Shadow DOM v1 polyfills</title>
</head>
<body>


<aris-header>
	<h1 slot="h1">Hello World!</h1>
	<h2 slot="h2">subtitle</h2>
</aris-header>

<script src="https://rawgit.com/webcomponents/custom-elements/master/custom-elements.min.js"></script>
<script src="https://rawgit.com/webcomponents/shadydom/master/shadydom.min.js"></script>
<script src="https://rawgit.com/webcomponents/shadycss/master/shadycss.min.js"></script>
<script>
(function() {
'use strict';

const supportsCustomElementsV1 = 'customElements' in window;
const supportsShadowDOMV1 = !!HTMLElement.prototype.attachShadow;

class arisHeader extends HTMLElement {
  static get is() { return 'aris-header'; }

  static get templateId() { return `${this.is}-template`; }

  static get template() {
    if (!this._template) {
      this._template = `
        <style>
				:host {
					display: block;
					position: relative;
				}

				section {
					background-color:#b82216;
					background-size:cover;
					padding:25px 15px;
				}

				.caret-right {
					width: 0;
					height: 0;
					display: none;
					vertical-align: middle;
					border-style: solid;
					border-width: 5px 0 5px 5px;
					border-color: transparent transparent transparent rgba(255, 255, 255, 0.7);
					margin: 0px 5px;
					position: relative;
					top: -7px;
				}

				.caret-visible {
					display:inline-block;
				}

				#arisHeader ::slotted(h1)  {
					color:white;
					margin:0;
					font-family: 'Dosis', sans-serif;
					font-weight: 200;
					font-size: 48px;
					display: inline-block;
				}

				#arisHeader ::slotted(h2)  {
					color:white;
					margin:0;
					font-family: 'Dosis', sans-serif;
					font-weight: 200;
					font-size: 30px;
					display: inline-block;
				}
			</style>
			<section id="arisHeader">
				<slot name="h1"></slot>
				<span class="caret-right"></span>
				<slot name="h2"></slot>
			</section>
      `;
    }
    return this._template;
  }

  constructor() {
    super();

    if (!arisHeader.template) {
      throw Error(`Could not find template.`);
    }
  }

  connectedCallback() {
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = arisHeader.template;
    //shadowRoot.innerHTML = arisHeader.template.cloneNode(true);
    //shadowRoot.appendChild(document.importNode(arisHeader.template.content, true));
    // Shim styles, CSS custom props, etc. if native Shadow DOM isn't available.
    if (!supportsShadowDOMV1) {
      ShadyCSS.applyStyle(this);
    }

    if (this.innerHTML.indexOf("h2") != -1) {
      this.shadowRoot.querySelector('.caret-right').classList.add("caret-visible");
    }
  }
}

ShadyCSS.prepareTemplate(arisHeader.template, arisHeader.is);
window.customElements.define(arisHeader.is, arisHeader);

})();
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
	<title>How to use the Custom Elements v1 + Shadow DOM v1 polyfills</title>
	</head>
	<body>


	<aris-header>
	<h1 slot="h1">Hello World!</h1>
	<h2 slot="h2">subtitle</h2>
	</aris-header>

	<script src="https://rawgit.com/webcomponents/custom-elements/master/custom-elements.min.js"></script>
	<script src="https://rawgit.com/webcomponents/shadydom/master/shadydom.min.js"></script>
	<script src="https://rawgit.com/webcomponents/shadycss/master/shadycss.min.js"></script>
	<script>
	(function() {
	'use strict';

	const supportsCustomElementsV1 = 'customElements' in window;
	const supportsShadowDOMV1 = !!HTMLElement.prototype.attachShadow;

	class arisHeader extends HTMLElement {
	static get is() { return 'aris-header'; }

	static get templateId() { return `${this.is}-template`; }

	static get template() {
	if (!this._template) {
	this._template = `
	<style>
	:host {
	display: block;
	position: relative;
	}

	section {
	background-color:#b82216;
	background-size:cover;
	padding:25px 15px;
	}

	.caret-right {
	width: 0;
	height: 0;
	display: none;
	vertical-align: middle;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-color: transparent transparent transparent rgba(255, 255, 255, 0.7);
	margin: 0px 5px;
	position: relative;
	top: -7px;
	}

	.caret-visible {
	display:inline-block;
	}

	#arisHeader ::slotted(h1) {
	color:white;
	margin:0;
	font-family: 'Dosis', sans-serif;
	font-weight: 200;
	font-size: 48px;
	display: inline-block;
	}

	#arisHeader ::slotted(h2) {
	color:white;
	margin:0;
	font-family: 'Dosis', sans-serif;
	font-weight: 200;
	font-size: 30px;
	display: inline-block;
	}
	</style>
	<section id="arisHeader">
	<slot name="h1"></slot>
	<span class="caret-right"></span>
	<slot name="h2"></slot>
	</section>
	`;
	}
	return this._template;
	}

	constructor() {
	super();

	if (!arisHeader.template) {
	throw Error(`Could not find template.`);
	}
	}

	connectedCallback() {
	const shadowRoot = this.attachShadow({mode: 'open'});
	shadowRoot.innerHTML = arisHeader.template;
	//shadowRoot.innerHTML = arisHeader.template.cloneNode(true);
	//shadowRoot.appendChild(document.importNode(arisHeader.template.content, true));
	// Shim styles, CSS custom props, etc. if native Shadow DOM isn't available.
	if (!supportsShadowDOMV1) {
	ShadyCSS.applyStyle(this);
	}

	if (this.innerHTML.indexOf("h2") != -1) {
	this.shadowRoot.querySelector('.caret-right').classList.add("caret-visible");
	}
	}
	}

	ShadyCSS.prepareTemplate(arisHeader.template, arisHeader.is);
	window.customElements.define(arisHeader.is, arisHeader);

	})();
	</script>
	</body>
	</html>