Javscript

Özel bir öğe nasıl oluşturulur?

Özel öğeler, Web Bileşenleri standardının bir parçasıdır. Tarayıcının yerel HTML öğelerini genişletmenize veya yenilerini oluşturmanıza olanak tanır. İyi kullanıldığında, bu onları taşınabilir ve sonraki projelerde geriye dönük uyumluluk veya çerçeve seçenekleri hakkında endişelenmeden yeniden kullanılabilir hale getirir.

İlk başta, CustomElementRegistry, ShadowDOM/ShadowRoot ve CSS Custom Properties gibi tüm yeni ilgili kavramları öğrenmek göz korkutucu bir görev gibi görünebilir. Benim tavsiyem, adım adım ilerlemek ve yol boyunca küçük pratik deneyler yapmak, biraz eğlenmek ve başlamak.

Özet

Özel bir öğe oluşturmak için yerel bir HTML öğesini genişleten bir sınıf oluşturmanız ve ardından onu customElements.define:

  1. HTMLElement öğesini genişleten bir JavaScript sınıfı oluşturun.
  2. ile bir Gölge Kökü ekleyin <slot> ve biraz stil.
  3. Öğeyi şununla kaydedin: customElements.define.

pratik bir örnek

class WjCard extends HTMLElement {
    #shadowRoot;

    constructor() {
        super();

        this.#shadowRoot = this.attachShadow({ mode: 'open' });
        this.#shadowRoot.innerHTML = `
            <style>
                .frame {
                    overflow: auto;
                    height: 100%;
                    box-sizing: border-box;
                    border: var(--wj-card-border, 1px solid #ccc);
                    border-radius: var(--wj-card-border-radius, 0.5em);
                    box-shadow: var(--wj-card-box-shadow, 0 0.25em 0.5em #aaa);
                    background: var(--wj-card-background, #fff);
                    padding: var(--wj-card-padding, 1em);
                }
            </style>

            <span class="frame">
                <slot></slot>
            </span>
        `;
    }
}

customElements.define('wj-card', WjCard);

Özel öğelerle başlamak için fazla bir şey yok.

İlk olarak, yereli genişleten yeni bir sınıf oluşturuyoruz. HTMLElement:

class WjCard extends HTMLElement {

Yapıcının ardından, öğeye bir ShadowRoot nesnesi ekliyoruz:

this.#shadowRoot = this.attachShadow({ mode: 'open' });

Gölge kökü, global DOM’a benzer, ancak özel öğemizin içinde gizlenmiş yerel bir DOM öğesidir. Avantajlardan biri, çoğu harici CSS kuralının bu gölge köküne ulaşamamasıdır. Bunu yapmak, çevreleyen sayfanın stilinin kart stilimizin stillerini etkilemeyeceğini garanti eder.

Özel öğemizde, ShadowRoot nesnesini dediğimiz özel bir alanda saklıyoruz. #shadowRoot. Bunun yerine yerel bir değişken kullanılabilirken, adlandırmayı tarayıcı geliştirme araçlarının DOM ağacını nasıl oluşturduğuyla tutarlı buluyorum (makalenin en üstündeki resme bakın).

Ardından, ekli ShadowRoot öğesinin HTML içeriğini bildiririz:

this.#shadowRoot.innerHTML = `
    <style>
        .frame {
            ...
            border: var(--wj-card-border, 1px solid #ccc);
            ...
        }
    </style>

    <span class="frame">
        <slot></slot>
    </span>
`;

Özel öğemizde, bir <style> etiketini gölge köküne eklerseniz, bu, her örnek için stil etiketinin bir kopyasına neden olur, ancak bu, bu örnek için yeterince iyi olacaktır (arama .adoptedStyleSheets alternatifler için).

Ayrıca bir ekliyoruz <div class="frame"> çerçeveyi stillendirecek bir şeye sahip olmak için gölge köküne öğe. Bu öğe, gölge kökü içinde olduğu için dışarıdan stil kuralları almayacak ve bu nedenle görünümü, özel öğe hangi projede kullanılırsa kullanılsın, tutarlı kalacaktır.

Stillerde CSS Özel Özelliklerinin kullanımına da dikkat edin (var(--wj-card-border, 1px solid #ccc);). Bunlar, kartımızı kullandığımız çeşitli projelerde “tema” yapmamızı sağlar. Daha sonra bu konuda daha fazlası.

Çerçevenin içine bir ekliyoruz <slot> harici HTML içeriğinin yerleştirileceği yer için yer tutucu görevi gören öğe. Hatta bir name niteliği ekleyerek birden fazla slota sahip olmak bile mümkündür (örn. <slot name="header">). A <slot> name özniteliği olmayan öğe, varsayılan öğe olarak kabul edilecektir.

Son olarak, özel öğemiz, CustomElementRegistry:

customElements.define('wj-card', WjCard);

Bu kayıt adımı, tarayıcının artık adında yeni bir öğe olduğunu bilmesini sağlar. <wj-card> ve uygulamasının sınıf olduğunu WjCard.

Dikkat edin, bir wj- önek. Bunun nedeni, özel öğeler zorunlu ile ayrılmış bir önekle başla -. Bu, adın yerel etiket adlarıyla çakışmamasını garanti eder. Ayrıca, özel öğenin hangi kitaplığın parçası olduğunu belirten bir ad alanı bildirimi sunar. Bu özel öğe için sadece wj-blogun adı gibi Wayin JJavaScript.

Öğelerinizi kullanın ve yeniden kullanın!

Şimdi bu <wj-card> öğesi, bir kez içe aktarıldığında, Vanilla JavaScript veya aşağıdaki HTML’ye sahip çerçeveler kullanmanıza bakılmaksızın herhangi bir yerde yeniden kullanılabilir:

  <wj-card>
    <h1>This is a card</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing
      elit. Similique dignissimos officiis repellat
      itaque natus qui magni voluptatum, illum, id, alias
      nostrum nemo. At eum ab quam unde est tenetur ullam.
    </p>
  </wj-card>

Artık, tümü tutarlı bir görünüme ve hisse sahip olacak daha büyük öğe kümeleriyle tasarım sistemlerinizi oluşturmaya başlayabilirsiniz. Sadece hayal et!

Kartınızı CSS Özel Özellikleriyle Temalandırma

içindeki gölge kökü <wj-card> artık dış dünyadan gelen şekillendirmelerden korunuyor, mükemmel.

Fakat bekle! Yine de CSS’nin ana bilgisayar sayfasının temasıyla eşleşmesi için özelleştirilebilirlik isteyebiliriz.

Bunu, ana bilgisayar sayfasında bildirilen CSS Özel Özelliklerini kullanarak başarabiliriz:

html {
    --wj-card-border: 3px solid rgb(152, 164, 196);
    --wj-card-border-radius: 5px;
    --wj-card-box-shadow: 0 0.5em 1em #aaa;
    --wj-card-background: rgb(249, 249, 255);
    --wj-card-padding: 2em;
}

Bu şekilde, özel öğelerinizin her biri için, hangi bölümlerin dışarıdan değiştirilebileceğini ve hangi bölümlerin kullanıcılardan uzakta kalması gerektiğini kontrol ettiğiniz bir stil API’si oluşturabilirsiniz.

Şimdi gidin ve kendi özel öğe kitaplıklarınızı ve tasarım sistemlerinizi oluşturun ve bunları dünyayla paylaşın!

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu