StefanNieuwenhuis · April 12, 2019 14:30
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html dir="ltr" lang="en">

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
  <title>Stencil Component Starter</title>
  <script src="/build/mycomponent.js"></script>

 </head>

 <body>

  <my-component id="modal">
    <h1>Hello world!</h1>
    <div>Is it me you're looking for?</div>
  </my-component>

  <button id="open-modal">Open Modal</button>
  <script>
    const modal = document.getElementById('modal');
    const open = document.getElementById('open-modal');

    open.onclick = () => {
      modal.open = true;
    };
    
    modal.addEventListener('click', () => {
      modal.open = false;
    });
  </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html dir="ltr" lang="en">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
	<title>Stencil Component Starter</title>
	<script src="/build/mycomponent.js"></script>

	</head>

	<body>

	<my-component id="modal">
	<h1>Hello world!</h1>
	<div>Is it me you're looking for?</div>
	</my-component>

	<button id="open-modal">Open Modal</button>
	<script>
	const modal = document.getElementById('modal');
	const open = document.getElementById('open-modal');

	open.onclick = () => {
	modal.open = true;
	};

	modal.addEventListener('click', () => {
	modal.open = false;
	});
	</script>
	</body>

	</html>