El atributo de parte HTML es un atributo global que se puede usar para permitir que CSS seleccione y diseñe elementos específicos en el árbol de sombra a través del pseudo-elemento::parte.
Sintaxis:
part="tab"
Ejemplo:
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>
Producción:
Navegadores compatibles:
- Google Chrome 73 y superior
- Firefox 72 y superior
- Safari 13.1 y superior
- Ópera 60 y superior
- Edge 79 y superior
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA