host-selectors/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Host selectors</title>
    <script src="main.js" defer></script>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
    </header>
    <main>
      <article>
        <h2>This is my first article.</h2>

        <p>This article is rather lovely and exciting — it is all about animals, including <a href="#"><context-span>Beavers</context-span></a>, <a href="#"><context-span>Bears</context-span></a>, and <a href="#"><context-span>Wolves</context-span></a>. I love animals and I'm sure you will too; please let us know what your favorite animals are. Woo hoo!</p>

      </article>

      <article>
        <h2>This is my second article.</h2>

        <p>This article is also quite exciting — it is all about colors, including <a href="#"><context-span>Red</context-span></a>, <a href="#"><context-span>Blue</context-span></a>, and <a href="#"><context-span>Pink</context-span></a>. A true joy indeed — funky exciting colors make the world go round. No more gray days for us.</p>

      </article>

      <aside>
        <h2>Some links about web components</h2>

        <ul>
          <li><a href="#"><context-span>Custom elements</context-span></a></li>
          <li><a href="#"><context-span>Shadow DOM</context-span></a></li>
          <li><a href="#"><context-span>Templates and slots</context-span></a></li>
        </ul>

      </aside>

    </main>

    <footer>
      <p>Copyright nobody; example written by <a href="#"><context-span class="footer">Chris Mills</context-span></a></p>
    </footer>

  </body>
</html>