angusgrant/dice-component-template.html

## dice-component-template.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Dice - Web Component</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<style type="text/css">
			body {
				margin: 0 auto;
				max-width: 40em;
				width: 88%;
			}
		</style>
	</head>
	<body>

		<h1>Dice - Web Component</h1>

		<roll-dice></roll-dice>
		<roll-dice>Roll a D6</roll-dice>


		<script>
            //Extend the HTMLElement to create the web component
            class RollDice extends HTMLElement {

                /**
                 * The class constructor object
                 */
                constructor () {

                //Always call super first in constructor
                super();

                    const btnText = this.innerHTML.trim();
                    this.innerHTML = `<p>
                                        <button>${btnText ? btnText : 'Roll Dice'}</button>
                                      </p>
                                      <div aria-live="polite"></div>
                                    `

                }


            }
            if ('customElements' in window) {
                customElements.define('roll-dice', RollDice);
            }

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

	<style type="text/css">
	body {
	margin: 0 auto;
	max-width: 40em;
	width: 88%;
	}
	</style>
	</head>
	<body>

	<h1>Dice - Web Component</h1>

	<roll-dice></roll-dice>
	<roll-dice>Roll a D6</roll-dice>


	<script>
	//Extend the HTMLElement to create the web component
	class RollDice extends HTMLElement {

	/**
	* The class constructor object
	*/
	constructor () {

	//Always call super first in constructor
	super();

	const btnText = this.innerHTML.trim();
	this.innerHTML = `<p>
	<button>${btnText ? btnText : 'Roll Dice'}</button>
	</p>
	<div aria-live="polite"></div>
	`

	}


	}
	if ('customElements' in window) {
	customElements.define('roll-dice', RollDice);
	}

	</script>
	</body>
	</html>