<!doctype html>

<script src=/></script>
<script defer src=/browser-sync.es></script>

<title>&lt;header-group&gt;</title>

<meta name=viewport content='width=device-width,initial-scale=1'>


<!-- debatable ?? -->
<link
  as=fetch
  rel=preload
  id=header-group
  href=/examples/header-group
>


<header-group>
  <h2 slot=header>&lt;header-group&gt;</h2>
  <a  slot=subheader title='See more component examples' href=/examples>See more component examples</a>
</header-group>

<!-- defaults can be supplied -->
<header-group></header-group>

<!-- slots let you map content to template output -->
<header-group>
  <h2 slot=header>My Own Header</h2>
  <p  slot=subheader>slots control output arrangement</p>
</header-group>

<header-group>
  <h2 slot=header>MrBernnz &amp; Snuggsi Header</h2>
</header-group>

<script>

Element `header-group`

(class extends HTMLElement {

  constructor ()
    { console.warn ('Constructing', this) }

  initialize ()
    { console.warn ('Initializing', this) }

  onconnect ()
    { console.warn ('Connecting', this) }

  onclick (event)
    { console.warn ('Clicked', event) }
})

</script>

<!doctype html>

<script src=/></script>

<title>&lt;header-group&gt;</title>

<meta name=viewport content='width=device-width,initial-scale=1'>


<!-- debatable ?? -->
<link
  as=fetch
  rel=preload
  id=header-group
  href=/examples/header-group
>


<header-group>
  <h2 slot=header>&lt;header-group&gt;</h2>
  <a  slot=subheader title='See more component examples' href=/examples>See more component examples</a>
</header-group>

<!-- defaults can be supplied -->
<header-group></header-group>

<!-- slots let you map content to template output -->
<header-group>
  <h2 slot=header>My Own Header</h2>
  <p  slot=subheader>slots control output arrangement</p>
</header-group>

<header-group>
  <h2 slot=header>MrBernnz &amp; Snuggsi Header</h2>
</header-group>

<script src=/examples/header-group/index.es></script>

Refactor index.es into own lib
Refactor index.es into own lib
