解き放たれたカスタム要素: DominandocustomElements.define() と .get() は、Jedi のフロントエンドと同じです!

開発者の皆さん！ Custom Elements の世界の秘密を解き明かす準備はできていますか?今日は、すべてのフロントエンド ジェダイが習得する必要がある秘密兵器である、customElements.define() とcustomElements.get() の機能を深く掘り下げていきます。

?️customElements.define(): 自分のポケモンを作成します... つまり、エレメントです!

あなたが気の狂ったフロントエンド科学者で、独自の HTML クリーチャーを作成したいと考えていると想像してください。そこで、customElements.define() が登場します。ミュウツーのクローンマシンに似ていますが、Web 要素用です!

class ElementoTopzera extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = `<p>Eu sou incrível e customizado!</p>`;
  }
}

customElements.define('elemento-topzera', ElementoTopzera);

これで、HTML のネイティブであるかのように要素を使用できるようになります。

<elemento-topzera></elemento-topzera>

ドーン！ ?あなたはちょうど DOM 内に生命を創造したところです!

?‍♂️ 開発者の友人を感動させる魔法の例

1. カウンターボタン クリックされた回数をカウントするボタンを想像してください。これは、デバッグの忍耐力を示すスコアカードのようなものです。

class BotaoContador extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
    this.innerHTML = `
      <button>Cliques: <span>0</span></button>
    `;
    this.addEventListener('click', () => {
      this.count++;
      this.querySelector('span').textContent = this.count;
    });
  }
}

customElements.define('botao-contador', BotaoContador);

1. プロフィールカード RPGのキャラクターよりカスタマイズ性の高いプロフィールカード！

class CardPerfil extends HTMLElement {
  constructor() {
    super();
    const nome = this.getAttribute('nome') || 'Dev Anônimo';
    const skill = this.getAttribute('skill') || 'Café++';

    this.innerHTML = `
      <div style="border: 2px solid #333; padding: 10px; margin: 10px;">
        <h2 id="nome">${nome}</h2>
        <p>Skill Suprema: ${skill}</p>
      </div>
    `;
  }
}

customElements.define('card-perfil', CardPerfil);

次のように使用します。

<card-perfil nome="ZézimDev" skill="Bug Hunter"></card-perfil>

?️‍♂️customElements.get(): 要素のシャーロック ホームズ

それでは、カスタム要素がすでに存在するかどうかを調べたい場合はどうすればよいでしょうか?そこで、Web コンポーネント界の私立探偵、customElements.get() の出番です!

const ElementoTopzera = customElements.get('elemento-topzera');

if (ElementoTopzera) {
  console.log('Elemento encontrado! Hora do show!');
  // Faz alguma mágica aqui
} else {
  console.log('404 Elemento Not Found');
}

⁉ 80 年代のアーケードよりクールなユースケース

1. コンポーネントの遅延読み込み 必要な場合にのみコンポーネントをロードすることで、プログラマがセミコロンの位置を覚えようとするよりも多くのメモリを節約できます。

function carregaComponenteSeNecessario(nomeElemento) {
  if (!customElements.get(nomeElemento)) {
    import(`./components/${nomeElemento}.js`)
      .then(() => console.log(`${nomeElemento} carregado e pronto pra ação!`))
      .catch(err => console.error(`Oops, deu ruim ao carregar ${nomeElemento}`, err));
  }
}

carregaComponenteSeNecessario('super-tabela');

1. セキュリティチェック 悪意のある要素があなたになりすまそうとしていないか確認してください。

function elementoSeguro(nomeElemento) {
  const elemento = customElements.get(nomeElemento);
  if (elemento && elemento.prototype instanceof HTMLElement) {
    console.log('Elemento verificado e aprovado! ?');
    return true;
  }
  console.warn('Elemento suspeito detectado! ?');
  return false;
}

elementoSeguro('botao-contador'); // true, se definido anteriormente
elementoSeguro('virus-malicioso'); // false, espero eu! ?

?フロントエンドのジェダイマスターからの教訓

1. 一意の名前: ソーシャル ネットワークのユーザー名などの要素名を選択します - 一意で、真ん中にダッシュが付いています!
2. 前に確認してください: DOM の時空に混乱が生じないように、定義する前に常にcustomElements.get() を使用してください。
3. 賢く拡張してください: 追加のスーパーパワーが必要ですか?ネイティブ要素を拡張します。

   class SuperButton extends HTMLButtonElement {
     // Código supimpa aqui
   }
   customElements.define('super-button', SuperButton, { extends: 'button' });

?エレメントのマスターになろう！

customElements.define() とcustomElements.get() を使用すると、ストリーマーのセットアップよりもさらにカスタマイズされた Web を作成する準備が整います。覚えておいてください: 大きな力には、素晴らしいコンポーネントを作成する大きなチャンスが伴います!

あとはあなた次第です!要素を作成して Web に革命を起こしましょう!そして、もしバグに巻き込まれたら、深呼吸して、「ライナス・トーバルズだったらどうするだろう？」と考えてください。 ??

この多元的な可能性をさらに深く掘り下げてみませんか? MDN の公式カスタム要素ドキュメントを参照してください。まるでフロントエンドウィザードのグリモワールのようです。 ?✨

どうしたの、開発者？独自の要素を作成することに興奮していますか?あなたが作成するクレイジーな要素をコメントで共有してください!おそらく次回は を行うことになるでしょう。それはコードをコーヒーに変えます! ☕?

コードがいつもあなたのそばにありますように! ??‍?

以上が解き放たれたカスタム要素: DominandocustomElements.define() と .get() は、Jedi のフロントエンドと同じです!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。