Example Web Component

image-gallery-component.html

<image-gallery>
	<img src="http://lorempixel.com/500/250/" slot="photo" alt="Lorem pixel image">
	<p slot="caption">Image courtesy of lorem pixel</p>
</image-gallery>

<template id="image-gallery-markup">
	<style>
		:host {
			position: relative;
		}

		#frame {
			position: relative;
			width: 100%;
			border: 4px solid black;
			border-radius: 2px;
			box-shadow: 0 2px 10px rgba(0,0,0,0.5);
		}

		#caption {
			font-style: italic;
			margin: 0;
			padding: 5px;
			background: #aaa;
		}

		::slotted(img) {
			width: 100%;
			height: auto;
			display: block;
			margin: 0;
		}

		::slotted(p) {
			margin: 0;
		}
	</style>
	
	<div id="frame">
		<slot name="photo"></slot>
		<div id="caption">
			<slot name="caption">Image caption</slot>
		</div>
	</div>
</template>

<script>
	class ImageGallery extends HTMLElement {
		constructor() {
			// When defining a constructor
			// always make sure the call super()
			super();

			// Attach a shadow root
			this._shadowRoot = this.attachShadow({mode: 'open'});
		}

		connectedCallback() {
			const imageTemplate = document.getElementById('image-gallery-markup');
			this._shadowRoot.innerHTML = imageTemplate.innerHTML;
		}

		nextSlide() {
		// Code to advance a slide
		}
	}

	window.customElements.define('image-gallery', ImageGallery);
</script>