El HTML «es» es un atributo global que le permite especificar que un elemento HTML estándar debe comportarse como un elemento integrado personalizado definido. Eso significa que el atributo solo se puede usar cuando el nombre del elemento personalizado especificado se ha definido correctamente en el documento.
Sintaxis:
<tag is="word-count"></tag>
Aquí, la etiqueta podría ser cualquier etiqueta HTML.
Ejemplo: El siguiente ejemplo ilustrará que el atributo is es HTML
HTML
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color: green">Geeksforgeeks</h1>
<strong>HTML is Attribute</strong>
</center>
<article contenteditable="">
<h2>Introduction of HTML</h2>
<p>
HTML stands for HyperText Markup Language.
It is used to design web pages using a markup
language. HTML is the combination of Hypertext
and Markup language. Hypertext defines the link
between the web pages. A markup language is used
to define the text document within tag which defines
the structure of web pages. This language is used to
annotate (make notes for the computer) text so that
a machine can understand it and manipulate text accordingly.
Most markup languages (e.g. HTML) are human-readable.
The language uses tags to define what manipulation has
to be done on the text.
</p>
<p is="word-count"></p>
</article>
<script>
class WordCount extends HTMLParagraphElement {
constructor() {
super();
const wcParent = this.parentNode;
function countWords(node) {
const text = node.innerText || node.textContent;
return text.split(/\s+/g).length;
}
const count = `Words: ${countWords(wcParent)}`;
const shadow = this.attachShadow({ mode: 'open' });
const text = document.createElement('span');
text.textContent = count;
shadow.appendChild(text);
setInterval(function () {
const count = `Words: ${countWords(wcParent)}`;
text.textContent = count;
}, 200);
}
}
customElements.define('word-count',
WordCount, { extends: 'p' });
</script>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome 67 y superior
- Edge 79 y superior
- Firefox 63 y superior
- Ópera 54 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