More than 1 year has passed since last update.

CustomElementでSlotの変更がリロードで反映されない

Posted at 2023-07-26

はじめに

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にすることで更新されるようになりました

おわりに

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up