はじめに

CustomElementを作成したのですが、うまくいかなかったのでまとめます
地味に引っかかる人が多いのではないかと思います

問題

index.html

  <body>
    <script src="./src/index.tsx" type="module"></script>
    <div>
      <sample-element>
        <span slot="test-msg"><div>テストメッセージ</div></span>
      </sample-element>
    </div>
  </body>

index.tsx

const SampleElement: FC = () => {
  return (
    <>
      <slot name="test-msg"></slot>
    </>
  );
};

これでテストメッセージという文字が表示されています

そこからテストメッセージの文字を変えます

        <span slot="test-msg"><div>テストメッセージ!!!</div></span>

しかし画面の文字は変わらず、リロードしてもハードリロードもだめでした

解決方法

Developer ToolsのNetworkがFast3Gになっていたのが問題でした

No throttlingにすることで更新されるようになりました

おわりに

たしかにスロットリングと書いてあるのでなにか関係しているみたいです