๐Ÿ”ธ<slot>

โ•ฑ๐Ÿšง under construction -> default slot

web โŸฉ component โŸฉ <slot>

circle-info

<slot> ๆ˜ฏๅœจ่‡ช่จ‚ๅ…ƒ็ด ๅ…ง้ƒจ <template> ๅฎš็พฉ็š„ๆ’ๆงฝ๏ผŒไปปไฝ•ๆ”พๅœจ่‡ช่จ‚ๅ…ƒ็ด ๆจ™็ฑค้–“็š„ๆœ€ไธŠๅฑค HTML ๅ…ƒ็ด ๆˆ–ๆ–‡ๅญ—๏ผŒๆœƒๆ’ๅ…ฅ <slot> ่ฃก้ขใ€‚

  • ๆฒ’ๆœ‰ๆŒ‡ๅฎšๆ’ๆงฝๅ็จฑ็š„๏ผŒๆœƒๆ”พๅ…ฅ default slot (ไนŸๅฐฑๆ˜ฏๆฒ’ๆœ‰ๅ็จฑ็š„ <slot>)ใ€‚

  • ๆœ‰ๆŒ‡ๅฎšๆ’ๆงฝๅ็จฑ็š„๏ผŒๆœƒๆ”พๅ…ฅ named slot (ไนŸๅฐฑๆ˜ฏๆœ‰ๅ็จฑ็š„ <slot>)ใ€‚

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

  • fallback content๏ผš<slot> ็š„้ ่จญๅ…งๅฎนใ€‚

ไฝฟ็”จๆ–นๅผ

๐Ÿ“ ่‡ช่จ‚ๅ…ƒ็ด ็š„ <template> ไธญ๏ผšๅฎš็พฉ <slot> ็š„ไฝ็ฝฎ๏ผˆไนŸๅฏไปฅๆ”พ named slot๏ผ‰

<template id="my-component-template">

  <style>
    .container {
      border: 1px solid blue;
      padding: 10px;
    }
  </style>
  
  <div class="container">
    <p>This is some default text.</p>
    
    <!-- โญ๏ธ 1๏ธโƒฃ ๆฑบๅฎš <slot> ไฝ็ฝฎ -->
    <slot></slot> 
    
    <p>This is more default text.</p>
  </div>
</template>

ไฝฟ็”จ slotchange ไบ‹ไปถ

็•ถ <slot> ็š„ๅ…งๅฎน็™ผ็”Ÿ่ฎŠๅŒ–ๆ™‚๏ผˆๅฆ‚ๆ’ๅ…ฅๆˆ–็งป้™ค slotted nodes ๏ผ‰๏ผŒๅฐฑๆœƒ่งธ็™ผ slotchange ้€™ๅ€‹ไบ‹ไปถใ€‚ไฝ ๅฏไปฅไฝฟ็”จ้€™ๅ€‹ไบ‹ไปถไพ†็›ฃ่ฝ slotted nodes ็š„่ฎŠๅŒ–๏ผŒไธฆๅŸท่กŒ็›ธๆ‡‰็š„ๆ“ไฝœใ€‚

Last updated