๐Ÿ”ธfallback content

web โŸฉ component โŸฉ slot โŸฉ named slot

<slot> ๅ…งๆไพ›็š„้ ่จญๅ…งๅฎนใ€‚ๅฆ‚ๆžœ่‡ช่จ‚็š„ web component ๆจ™็ฑคๅ…งๆฒ’ๆœ‰ๆไพ›ไปปไฝ•ๅ…งๅฎน๏ผŒๅ‰‡ๆœƒ้กฏ็คบ้ ่จญๅ…งๅฎนใ€‚

  • named slot๏ผšๅฏๆŽงๅˆถๅ…งๅฎน็š„ๆ’ๅ…ฅไฝ็ฝฎใ€‚

็”จๆณ•

1๏ธโƒฃ ๅœจ template ไธญๅฎš็พฉ <slot>๏ผŒไธฆๆไพ›้ ่จญๅ…งๅฎน๏ผš
<template id="my-component-template">
  <div class="container">
    <!-- โญ๏ธ ๅ…งๅซ้ ่จญๅ…งๅฎน็š„ <slot> -->
    <slot>This is the default content if nothing is provided.</slot>
  </div>
</template>
2๏ธโƒฃ ไฝฟ็”จ็ฉบ็š„ component ๆจ™็ฑค๏ผš
<my-component></my-component>

Last updated