cferdinandi/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>My First Web Component</title>

	<style>
		body {
			margin: 1em auto;
			max-with: 40em;
			width: 88%;
		}
	</style>
</head>
<body>

	<wc-count>
		<button>Clicked 0 Times</button>
	</wc-count>

	<script>
		customElements.define('wc-count', class extends HTMLElement {

			/**
			 * Instantiate our new component
			 */
			constructor () {

				// Inherit parent class properties
				super();

				// Define instance properties
				this.count = 0;
				this.button = this.querySelector('button');

				// Listen for click events on the button
				this.button.addEventListener('click', this);

				// Add an ARIA live region to the button
				this.button.setAttribute('aria-live', 'polite');

			}

			/**
			 * Handle events
			 * @param  {Event} event The event object
			 */
			handleEvent (event) {
				this.count++;
				this.button.textContent = `Clicked ${this.count} Times`;
			}

		});
	</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>My First Web Component</title>

	<style>
	body {
	margin: 1em auto;
	max-with: 40em;
	width: 88%;
	}
	</style>
	</head>
	<body>

	<wc-count>
	<button>Clicked 0 Times</button>
	</wc-count>

	<script>
	customElements.define('wc-count', class extends HTMLElement {

	/**
	* Instantiate our new component
	*/
	constructor () {

	// Inherit parent class properties
	super();

	// Define instance properties
	this.count = 0;
	this.button = this.querySelector('button');

	// Listen for click events on the button
	this.button.addEventListener('click', this);

	// Add an ARIA live region to the button
	this.button.setAttribute('aria-live', 'polite');

	}

	/**
	* Handle events
	* @param {Event} event The event object
	*/
	handleEvent (event) {
	this.count++;
	this.button.textContent = `Clicked ${this.count} Times`;
	}

	});
	</script>

	</body>
	</html>