<link rel="stylesheet"> shadow dom bug

Multiple elements on the page that use the same href do not get the stylesheet applied.

HTML

<template id="link-stylesheet-template">
  <link rel="stylesheet" href="https://edge.fscdn.org/assets/components/fs-styles/dist/familysearch-styles.min-f51c06d962233bdd57e3e238d55c51c1.css">

  <div class="fs-alert">
    <p>Success!</p>
  </div>
</template>

<template id="test-template">
  <link rel="stylesheet" href="https://edge.fscdn.org/assets/components/fs-styles/dist/familysearch-styles.min-f51c06d962233bdd57e3e238d55c51c1.css">

  <button class="fs-button fs-button--recommended">It worked!</button>
</template>

<link-stylesheet></link-stylesheet>
<link-stylesheet></link-stylesheet>

<script>
  (function() {
    const template = document.querySelector('#link-stylesheet-template');

    customElements.define('link-stylesheet', class extends HTMLElement {
      constructor() {
        super();

        const root = this.attachShadow({
          mode: 'open'
        });
        const temp = document.importNode(template.content, true);

        root.appendChild(temp);
      }
    });
  })();

</script>

<script>
  (function() {
    const template = document.querySelector('#test-template');

    customElements.define('linked-button', class extends HTMLElement {
      constructor() {
        super();

        const root = this.attachShadow({
          mode: 'open'
        });
        const temp = document.importNode(template.content, true);

        root.appendChild(temp);
      }
    });
  })();

</script>

<linked-button></linked-button>