is

Description

L’attribut is permet d’utiliser un Customized Built-in Element — un élément HTML natif étendu via customElements.define() avec l’option extends. Contrairement aux Autonomous Custom Elements (<mon-composant>), les éléments étendus héritent du comportement de l’élément natif qu’ils étendent.

Syntaxe

<button is="mon-bouton">Clic</button>
<input is="mon-input" type="text">

Exemples

Définition et utilisation d’un bouton étendu :

<script>
  class MonBouton extends HTMLButtonElement {
    constructor() {
      super();
      this.addEventListener('click', () => {
        console.log('Bouton personnalisé cliqué');
      });
    }

    connectedCallback() {
      this.setAttribute('data-personnalise', 'true');
    }
  }

  customElements.define('mon-bouton', MonBouton, { extends: 'button' });
</script>

<!-- Utilisation avec l'attribut is -->
<button is="mon-bouton" type="button">Mon bouton étendu</button>

Notes

Problème de support Safari : Safari ne supporte pas les Customized Built-in Elements (et ne les supportera pas sans polyfill). Ce manque de support universel limite fortement l’utilisation de is en production.

Autonomous vs Customized : les Autonomous Custom Elements (<mon-composant>) ont un support universel. Les Customized Built-in Elements (<button is="...">) ont un support partiel. Pour une meilleure compatibilité, préférer les Autonomous Custom Elements.

Avantage sémantique : un <button is="mon-bouton"> reste sémantiquement un bouton pour les technologies d’assistance, là où <mon-composant> nécessite des attributs ARIA supplémentaires.