๐ ๅ
ง้จ็ตๆง๏ผๅฎ็พฉๅ
ทๅๆๆงฝ (named slot) ่้ ่จญๆๆงฝ
<template id="my-component-template">
<div class="container">
<!-- โญ๏ธ named slot: header -->
<slot name="header"></slot>
<div class="content">
<!-- โญ๏ธ ๆฒๆๅๅญ็ๅฐฑๆฏใ้ ่จญๆๆงฝใ(default slot) -->
<slot></slot>
<p>This is more default text inside content.</p>
</div>
<!-- โญ๏ธ named slot: footer -->
<slot name="footer"></slot>
</div>
</template>
๐ ๅค้จ HTML๏ผๆๅ่ฆๆๅ
ฅ็ๆๆงฝ
<my-component>
<!-- โญ๏ธ ๆๅ่ฆๆๅ
ฅ็ slot -->
<h1 slot="header">This is the header!</h1>
<!-- โญ๏ธ ๆฒๆๅ็ๆ่ขซๆพๅฐ unnamed slot (default slot) -->
<p>This is the main content.</p>
<!-- โญ๏ธ ๆๅ่ฆๆๅ
ฅ็ slot -->
<p slot="footer">This is the footer!</p>
</my-component>