Özel bileşen oluşturma

Not: Bu kılavuz, yeni Custom Elements sürüm 1 spesifikasyonuna uygun olacak şekilde güncellendi. Bu spesifikasyonu görüntüleyebilir, hakkında daha fazla bilgi edinebilirsiniz.

Eski özel bileşenler, Temmuz 2021'den itibaren Google Web Designer'da desteklenmeyecek. Özel bileşenlerinizi güncellemek için yeni sürüme geçme kılavuzuna göz atın.

Deneyimli web geliştiricileri, Google Web Designer için mevcut bileşenleri genişleten veya sıfırdan yeni bileşenler oluşturan kendi özel bileşenlerini yazabilirler. Diğer kullanıcılar kod düzenlemek zorunda kalmadan projelerine işlev katmak için bu özel bileşenleri yükleyebilirler.

Geçerli bir bileşen paketi, bir JSON manifest dosyası içeren bir .zip dosyasından oluşur. Paket, özel HTML öğesi tanımlayan bir JavaScript dosyası veya gerekli diğer JavaScript ve CSS dosyaları gibi başka dosyalar da içerebilir.

1. Özel öğe tanımlayın

Özel bileşenler, Google Web Designer'da özel öğeler olarak uygulanır.

Özel öğe, JavaScript koduyla tanımladığınız ve özel bir etiket adı verdiğiniz bir HTML öğe türüdür. Tanımladığınız özel öğeleri, herhangi bir standart öğe gibi kullanabilirsiniz. Yerel HTML öğeleriyle çalışan DOM API'leri, özel öğelerle de çalışır.

WHATWG'deki HTML spesifikasyonunda özel öğeler hakkında daha fazla bilgi edinin.

Google Web Designer'da özel öğeler için aşağıdaki yönergeleri izleyin:

• Özel öğelerin etiket adı, x-panel veya expand-button gibi bir çizgi (-) içermelidir.
• gwd- ad alanı, Google Web Designer tarafından kullanıldığından özel öğelerinizde kullanılamaz.

Özel öğe kodu örneğine bakın

2. Gerektiği kadar JavaScript ve CSS dosyası oluşturun

İstediğiniz işlevi ve stili sağlayan JavaScript ve CSS dosyasını yazın.

JavaScript ve CSS dosyalarını pakete eklemek yerine harici bir sunucudan yayınlayabilirsiniz. JSON manifest dosyasında harici dosyalara referanslar ekleyin.

3. Kodunuzu ES5'e aktarın (isteğe bağlı)

Maksimum tarayıcı uyumluluğu için bileşen kodunuzu JavaScript ES5 söz dizimini kullanmak üzere aktarmanızı öneririz. Bu, bileşeninizin eski tarayıcılarda düzgün şekilde çalıştığından emin olmanıza yardımcı olur.

1. https://babeljs.io/repl adresinde bir JavaScript derleyicisi olan Babel'e gidin.
2. Presets bölümünün altında es2015'i seçin.
3. Bileşen JavaScript kodunuzu kopyalayıp sol bölmeye yapıştırın. Kodun çevrilmiş sürümü sağ bölmede görünür. Bu sürümü bileşeniniz için kullanabilirsiniz.

4. Bileşen dosyalarının JSON manifest dosyasını oluşturun

Özel bileşenler, Google Web Designer'a bileşen hakkında bilgi veren JSON biçiminde ve manifest.json adlı bir manifest dosyası gerektirir. Aşağıda ayrıntılı bir şekilde verilen şemayı takip edin. Notun özellikleri arasında şunlar yer alır:

• type: Zorunlu.
• version: Zorunlu. Özel bileşende her güncelleme yaptığınızda sürüm numarasını artırın.
• customElementsVersion: Custom Elements v1 spesifikasyonuna uyan yeni bileşenler için gereklidir.
• files: Özel bileşen paketinde bulunan diğer dosyaları listeler.
• externalScripts: Harici komut dosyası bağımlılıklarını belirtir. Bu komut dosyaları, dokümanın kısmına otomatik olarak