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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。