<slot>ï¼Web ç»ä»¶ææ§½å ç´
åºçº¿
广æ³å¯ç¨
èª 2020å¹´1æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
<slot> HTML å
ç´ æ¯ââWeb ç»ä»¶ææ¯å¥ä»¶çä¸é¨åââ宿¯ä¸ä¸ªå¨ web ç»ä»¶å
é¨çå ä½ç¬¦ï¼ä½ å¯ä»¥ä½¿ç¨èªå·±çæ è®°æ¥å¡«å
该å ä½ç¬¦ï¼ä»èå建åç¬ç DOM æ å¹¶å°å
¶ä¸èµ·åç°ã
屿§
æ¤å ç´ ä» å å«å ¨å±å±æ§ã
name-
ææ§½åç§°ã
å ·åææ§½æ¯å ·æ
name屿§ç<slot>å ç´ ã
示ä¾
html
<template id="element-details-template">
<style>
details {
font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
}
.name {
font-weight: bold;
color: #217ac0;
font-size: 120%;
}
h4 {
margin: 10px 0 -8px 0;
background: #217ac0;
color: white;
padding: 2px 6px;
border: 1px solid #cee9f9;
border-radius: 4px;
}
.attributes {
margin-left: 22px;
font-size: 90%;
}
.attributes p {
margin-left: 16px;
font-style: italic;
}
</style>
<details>
<summary>
<code class="name">
<<slot name="element-name">éè¦åç§°</slot>>
</code>
<span class="desc"><slot name="description">éè¦æè¿°</slot></span>
</summary>
<div class="attributes">
<h4>屿§</h4>
<slot name="attributes"><p>æ </p></slot>
</div>
</details>
<hr />
</template>
夿³¨ï¼ä½ å¯ä»¥å¨ element-detailsï¼åè§å¨çº¿æ¼ç¤ºï¼æ¥ç宿´ç¤ºä¾ãæ¤å¤ï¼ä½ è¿å¯ä»¥å¨ä½¿ç¨æ¨¡æ¿åææ§½æ¾å°ç¸å ³è§£éã
ææ¯æ¦è¦
| å 容åç±» | æµå¼å 容ãçè¯å 容ã |
|---|---|
| å 许çå 容 | éæå 容 |
| äºä»¶ | slotchange |
| æ ç¾çç¥ | ä¸å 许ï¼å¼å§æ ç¾åç»ææ ç¾é½ä¸è½çç¥ã |
| å 许çç¶å ç´ | 任使¥åçè¯å 容çå ç´ ã |
| éå«ç ARIA è§è² | 没æå¯¹åºçè§è² |
| å 许ç ARIA è§è² | 没æå
许ç role |
| DOM æ¥å£ | HTMLSlotElement |
è§è
| è§è |
|---|
| HTML> # the-slot-element> |
| DOM> # shadow-tree-slots> |
æµè§å¨å ¼å®¹æ§
åè§
- HTML
<template>å ç´ - HTML
slot屿§ - CSS
::slotted伪å ç´ - CSS
:has-slotted伪类 - CSS 忍¡å