🔰slotted node styles
╱🚧 under construction -> CSS 繼承
web ⟩ component ⟩ slot ⟩ slotted node styles
控制樣式的方式
📁 <template> 內部 CSS:用::slotted()
(pseudo-element)
<template id="my-component-template">
<style>
/* ⭐️ slotted: <p> element */
::slotted(p) { ... }
/* ⭐️ slotted: all nodes */
::slotted(*) { ... }
/* ⭐️ slotted: class="highlight" */
::slotted(.highlight) { ... }
</style>
<slot></slot>
</template>
⚠️ 但 ::slotted()
有限制:
只能設定部分樣式,如:
font
、text
、margin
、padding
、border
、background
等。較複雜的樣式可能無法運作,如:
display
、float
、width
、height
等。無法選擇後代元素。如:
::slotted(p span)
是無效的。
Last updated
Was this helpful?