HTML part屬性用法及代碼示例

HTML 部分屬性是一個全局屬性，可用於允許 CSS 通過::part pseudo-element 在陰影樹中選擇和設置特定元素的樣式。

用法:

part="tab"

例：

HTML


<!DOCTYPE html>
<html>
  
<head>
    <style type="text/css">
        h1 {
            color:green;
        }
  
        tabbed-custom-element::part(tab) {
            color:green;
            border-bottom:dotted 2px;
            width:400px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <strong>HTML part Attribute</strong>
        <br><br>
        <template id="tabbed-custom-element">
            <div part="tab">Hypertext Markup Language</div>
            <div part="tab active">Cascading Style Sheet</div>
            <div part="tab">JavaScript</div>
        </template>
        <tabbed-custom-element></tabbed-custom-element>
    </center>
  
    <script>
  
        // Using the selector to select the 
        // part attributes elements
        let template = document
            .querySelector("#tabbed-custom-element");
  
        globalThis.customElements.define(
            template.id, class extends HTMLElement {
            constructor() {
                super();
                this.attachShadow({ mode:"open" });
                this.shadowRoot.appendChild(template.content);
            }
        });
    </script>
</body>
  
</html>

輸出：

支持的瀏覽器：

穀歌瀏覽器
Firefox
Safari
Opera
Edge

相關用法

注：本文由純淨天空篩選整理自skyridetim大神的英文原創作品 HTML part Attribute。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。