<header>
  <h1>document.querySelector</h1>
</header>
<main>
  <p>You can use <code>document.querySelector()</code> to select individual elements in the DOM</p>
</main>
<footer>
  <p>This is a footer</p>
</footer>

header h1 {
  font-size: 2rem;
}

/* global getShadowRoot */
// XXX getShadowRoot is not actually defined anywhere,
// and this example needs to be fixed

(function () {
  function getHeader() {
    const documentRoot = getShadowRoot();
    return documentRoot.querySelector('header');
  }

  const header = getHeader();
  console.log('header', header.textContent.trim());
  header.style.backgroundColor = '#b2ebf2';
})();