\u0130lk \u00d6zel Elementim<\/title>\n<\/head>\n<body>\n \n <my-greeting name=\"D\u00fcnya\"><\/my-greeting>\n <my-greeting name=\"Geli\u015ftirici\"><\/my-greeting>\n\n <script>\n \/\/ 1. HTMLElement s\u0131n\u0131f\u0131n\u0131 geni\u015fleten bir s\u0131n\u0131f tan\u0131mlay\u0131n\n class MyGreeting extends HTMLElement {\n constructor() {\n \/\/ Her zaman super() \u00e7a\u011fr\u0131s\u0131 yap\u0131lmal\u0131d\u0131r.\n \/\/ Bu, HTMLElement'in constructor'\u0131n\u0131 \u00e7a\u011f\u0131r\u0131r.\n super();\n console.log(\"MyGreeting elementi olu\u015fturuldu!\");\n }\n\n \/\/ Element DOM'a eklendi\u011finde \u00e7a\u011fr\u0131l\u0131r\n connectedCallback() {\n const name = this.getAttribute('name') || 'Misafir';\n this.innerHTML = <code><p>Merhaba, ${name}!<\/p><\/code>;\n console.log(\"MyGreeting elementi DOM'a ba\u011fland\u0131.\");\n }\n\n \/\/ Element DOM'dan kald\u0131r\u0131ld\u0131\u011f\u0131nda \u00e7a\u011fr\u0131l\u0131r\n disconnectedCallback() {\n console.log(\"MyGreeting elementi DOM'dan ayr\u0131ld\u0131.\");\n }\n\n \/\/ Elementin g\u00f6zlemleyece\u011fi nitelikleri (attributes) belirtir\n static get observedAttributes() {\n return ['name'];\n }\n\n \/\/ G\u00f6zlemlenen bir nitelik de\u011fi\u015fti\u011finde \u00e7a\u011fr\u0131l\u0131r\n attributeChangedCallback(name, oldValue, newValue) {\n if (name === 'name' && oldValue !== newValue) {\n this.innerHTML = <code><p>Merhaba, ${newValue}!<\/p><\/code>;\n console.log(<code>'name' niteli\u011fi ${oldValue}'dan ${newValue}'e de\u011fi\u015fti.<\/code>);\n }\n }\n }\n\n \/\/ 2. customElements.define() metodunu kullanarak elementi kaydedin\n customElements.define('my-greeting', MyGreeting);\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>MyGreeting<\/code> ad\u0131nda bir JavaScript s\u0131n\u0131f\u0131 tan\u0131mlad\u0131k. Bu s\u0131n\u0131f, <code>HTMLElement<\/code> s\u0131n\u0131f\u0131n\u0131 geni\u015fletir. <code>constructor()<\/code> metodu, elementin her \u00f6rne\u011fi olu\u015fturuldu\u011funda \u00e7a\u011fr\u0131l\u0131r. <code>super()<\/code> \u00e7a\u011fr\u0131s\u0131 zorunludur ve temel s\u0131n\u0131f\u0131n yap\u0131land\u0131r\u0131c\u0131s\u0131n\u0131 \u00e7al\u0131\u015ft\u0131r\u0131r.<\/p>\n<p><code>customElements.define('my-greeting', MyGreeting);<\/code> sat\u0131r\u0131, <code>MyGreeting<\/code> s\u0131n\u0131f\u0131n\u0131 <code><my-greeting><\/code> etiketiyle e\u015fle\u015ftirir. Bu noktadan itibaren taray\u0131c\u0131, HTML’de <code><my-greeting><\/code> etiketini g\u00f6rd\u00fc\u011f\u00fcnde, <code>MyGreeting<\/code> s\u0131n\u0131f\u0131n\u0131n bir \u00f6rne\u011fini olu\u015fturup onun davran\u0131\u015flar\u0131n\u0131 uygulayacakt\u0131r.<\/p>\n<h3>\u00d6zel Element Ya\u015fam D\u00f6ng\u00fcs\u00fc (Lifecycle Callbacks)<\/h3>\n<p>\u00d6zel elementler, belirli olaylar meydana geldi\u011finde tetiklenen \u00f6zel ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131na sahiptir. Bu metotlar, elementin DOM’a eklendi\u011fi, kald\u0131r\u0131ld\u0131\u011f\u0131, niteliklerinin de\u011fi\u015fti\u011fi veya ba\u015fka bir belgeye ta\u015f\u0131nd\u0131\u011f\u0131 anlarda \u00f6zel mant\u0131k \u00e7al\u0131\u015ft\u0131rmam\u0131z\u0131 sa\u011flar.<\/p>\n<p>* <strong><code>constructor()<\/code>:<\/strong> Elementin bir \u00f6rne\u011fi olu\u015fturuldu\u011funda \u00e7a\u011fr\u0131lan ilk metottur. Genellikle DOM manip\u00fclasyonu veya render i\u015flemleri burada yap\u0131lmaz, sadece ba\u015flang\u0131\u00e7 durumlar\u0131 ve olay dinleyicileri gibi temel kurulumlar i\u00e7in kullan\u0131l\u0131r. <code>super()<\/code> \u00e7a\u011fr\u0131s\u0131 zorunludur.<br \/>\n* <strong><code>connectedCallback()<\/code>:<\/strong> Element, belge DOM’una ilk kez eklendi\u011finde \u00e7a\u011fr\u0131l\u0131r. Bu, elementin i\u00e7eri\u011fini olu\u015fturmak, olay dinleyicileri eklemek veya d\u0131\u015f kaynaklardan veri almak i\u00e7in ideal bir yerdir. Element, DOM’dan kald\u0131r\u0131l\u0131p tekrar eklendi\u011finde de tekrar \u00e7a\u011fr\u0131l\u0131r.<br \/>\n* <strong><code>disconnectedCallback()<\/code>:<\/strong> Element, belge DOM’undan kald\u0131r\u0131ld\u0131\u011f\u0131nda \u00e7a\u011fr\u0131l\u0131r. Bu metot, <code>connectedCallback<\/code> i\u00e7inde eklenen olay dinleyicilerini temizlemek veya a\u00e7\u0131k ba\u011flant\u0131lar\u0131 kapatmak gibi kaynaklar\u0131 serbest b\u0131rakmak i\u00e7in kullan\u0131l\u0131r. Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir.<br \/>\n* <strong><code>adoptedCallback()<\/code>:<\/strong> Element, farkl\u0131 bir belgeye (\u00f6rne\u011fin, bir iframe’den ana belgeye) ta\u015f\u0131nd\u0131\u011f\u0131nda \u00e7a\u011fr\u0131l\u0131r. Nadiren kullan\u0131l\u0131r.<br \/>\n* <strong><code>attributeChangedCallback(name, oldValue, newValue)<\/code>:<\/strong> Elementin <code>observedAttributes<\/code> listesinde belirtilen bir niteli\u011fi de\u011fi\u015fti\u011finde \u00e7a\u011fr\u0131l\u0131r. Bu metot, nitelik de\u011fi\u015fikliklerine tepki vererek elementin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc veya davran\u0131\u015f\u0131n\u0131 g\u00fcncellemenizi sa\u011flar.<\/p>\n<p><code>attributeChangedCallback<\/code> metodunu kullanabilmek i\u00e7in, elementin hangi nitelikleri g\u00f6zlemlemesi gerekti\u011fini <code>static get observedAttributes()<\/code> metodunda belirtmeniz gerekir. Bu metot, g\u00f6zlemlenecek nitelik adlar\u0131n\u0131n bir dizisini d\u00f6nd\u00fcrmelidir.<\/p>\n<p>Yukar\u0131daki <code>my-greeting<\/code> \u00f6rne\u011finde, <code>name<\/code> niteli\u011fini g\u00f6zlemliyoruz ve bu nitelik de\u011fi\u015fti\u011finde <code>attributeChangedCallback<\/code> tetiklenerek elementin i\u00e7eri\u011fini g\u00fcncelliyor.<\/p>\n<h3>Shadow DOM ile Kaps\u00fclleme<\/h3>\n<p>\u00d6zel elementlerin g\u00fcc\u00fcn\u00fc tam olarak kullanabilmek i\u00e7in Shadow DOM (G\u00f6lge DOM) kavram\u0131n\u0131 anlamak esast\u0131r. Shadow DOM, bir elementin i\u00e7 yap\u0131s\u0131n\u0131 (HTML ve CSS) d\u0131\u015far\u0131daki belgeden tamamen izole etmenizi sa\u011flayan bir mekanizmad\u0131r. Bu sayede, elementinizin i\u00e7indeki stiller d\u0131\u015far\u0131daki stillerle \u00e7ak\u0131\u015fmaz ve d\u0131\u015far\u0131daki stiller elementinizin i\u00e7ini etkilemez. Bu, ger\u00e7ek bir “bile\u015fen” olu\u015fturmak i\u00e7in kritik bir \u00f6zelliktir.<\/p>\n<p>Bir elemente Shadow DOM eklemek i\u00e7in <code>attachShadow()<\/code> metodunu kullan\u0131r\u0131z:<\/p>\n<pre><code class=\"language-javascript\">class MyShadowElement extends HTMLElement {\n constructor() {\n super();\n \/\/ Shadow DOM'u elemente ekle\n \/\/ mode: 'open' Shadow DOM'a JavaScript ile d\u0131\u015far\u0131dan eri\u015filebilece\u011fi anlam\u0131na gelir\n \/\/ mode: 'closed' ise eri\u015filemez anlam\u0131na gelir\n this.shadowRoot = this.attachShadow({ mode: 'open' });\n\n \/\/ Shadow DOM i\u00e7ine i\u00e7erik ekle\n this.shadowRoot.innerHTML = <code>\n <style>\n \/<em> Bu stiller sadece Shadow DOM i\u00e7indeki elementleri etkiler <\/em>\/\n p {\n color: blue;\n font-family: sans-serif;\n }\n .highlight {\n background-color: yellow;\n padding: 5px;\n }\n <\/style>\n <p><span class=\"highlight\">Merhaba<\/span> Shadow DOM!<\/p>\n <\/code>;\n }\n}\ncustomElements.define('my-shadow-element', MyShadowElement);<\/code><\/pre>\n<p>Yukar\u0131daki \u00f6rnekte, <code>MyShadowElement<\/code> ad\u0131nda bir \u00f6zel element olu\u015fturduk. <code>constructor<\/code> i\u00e7inde <code>this.attachShadow({ mode: 'open' });<\/code> \u00e7a\u011fr\u0131s\u0131 ile bir Shadow DOM olu\u015fturduk ve bu Shadow DOM’a referans <code>this.shadowRoot<\/code> \u00fczerinden eri\u015filebilir hale geldi. Daha sonra, <code>this.shadowRoot.innerHTML<\/code> kullanarak Shadow DOM i\u00e7ine hem HTML hem de CSS ekledik. Bu CSS, sadece Shadow DOM i\u00e7indeki <code><\/p>\n<p><\/code> ve <code>.highlight<\/code> elementlerini etkileyecektir, d\u0131\u015far\u0131daki belgedeki di\u011fer elementleri de\u011fil.<\/p>\n<p><strong><code>mode: 'open'<\/code> vs. <code>mode: 'closed'<\/code>:<\/strong><br \/>\n* <strong><code>open<\/code>:<\/strong> Elementin Shadow DOM’una JavaScript ile d\u0131\u015far\u0131dan eri\u015filebilir (<code>element.shadowRoot<\/code> \u00fczerinden). Bu, genellikle tercih edilen moddur \u00e7\u00fcnk\u00fc elementin i\u00e7 mant\u0131\u011f\u0131n\u0131 d\u0131\u015far\u0131dan test etme veya manip\u00fcle etme esnekli\u011fi sunar.<br \/>\n* <strong><code>closed<\/code>:<\/strong> Elementin Shadow DOM’una JavaScript ile d\u0131\u015far\u0131dan eri\u015filemez (<code>element.shadowRoot<\/code> null d\u00f6ner). Bu, daha g\u00fc\u00e7l\u00fc bir kaps\u00fclleme sa\u011flar ancak elementin i\u00e7 yap\u0131s\u0131yla etkile\u015fimi s\u0131n\u0131rlar. Genellikle daha az kullan\u0131l\u0131r.<\/p>\n<p>Shadow DOM sayesinde, bile\u015fenlerinizin stilini ve yap\u0131s\u0131n\u0131 g\u00fcvenle tan\u0131mlayabilirsiniz, \u00e7\u00fcnk\u00fc bunlar d\u0131\u015f d\u00fcnyadan tamamen izole edilmi\u015f olacakt\u0131r.<\/p>\n<h3>HTML Templates (<code><template><\/code> ve <code><slot><\/code>) ile \u0130\u00e7erik Da\u011f\u0131t\u0131m\u0131<\/h3>\n<p>Bile\u015fenlerin HTML yap\u0131s\u0131n\u0131 her seferinde JavaScript ile string olarak olu\u015fturmak yerine, <code><template><\/code> etiketi ve <code><slot><\/code> elementini kullanarak daha temiz ve yeniden kullan\u0131labilir bir yol izleyebiliriz.<\/p>\n<p>* <strong><code><template><\/code> etiketi:<\/strong> Taray\u0131c\u0131 taraf\u0131ndan render edilmeyen, ancak JavaScript ile eri\u015filebilen bir HTML kod par\u00e7ac\u0131\u011f\u0131n\u0131 tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r. Bu, bir bile\u015fenin i\u00e7 yap\u0131s\u0131n\u0131n “tasla\u011f\u0131n\u0131” olu\u015fturmak i\u00e7in idealdir.<br \/>\n* <strong><code><slot><\/code> elementi:<\/strong> Bir \u00f6zel elementin i\u00e7ine d\u0131\u015far\u0131dan i\u00e7erik yerle\u015ftirmenizi (projeksiyon) sa\u011flar. Bu, elementin kendisinin sadece bir “kabuk” olmas\u0131n\u0131 ve i\u00e7indeki dinamik i\u00e7eri\u011fin d\u0131\u015far\u0131dan sa\u011flanmas\u0131n\u0131 m\u00fcmk\u00fcn k\u0131lar.<\/p>\n<p>Bir \u00f6rnekle a\u00e7\u0131klayal\u0131m:<\/p>\n<pre><code class=\"language-html\"><!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Template ve Slot \u00d6rne\u011fi<\/title>\n <style>\n \/<em> Genel stil <\/em>\/\n body { font-family: sans-serif; }\n <\/style>\n<\/head>\n<body>\n \n\n \n <template id=\"my-card-template\">\n <style>\n \/<em> Bu stiller Shadow DOM i\u00e7inde kaps\u00fcllenir <\/em>\/\n .card {\n border: 1px solid #ccc;\n border-radius: 8px;\n padding: 16px;\n margin: 16px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n background-color: #f9f9f9;\n display: block;\n }\n .card-header {\n font-size: 1.2em;\n font-weight: bold;\n margin-bottom: 10px;\n color: #333;\n }\n .card-body {\n color: #555;\n }\n \/<em> \u0130simli slotlar i\u00e7in stil <\/em>\/\n ::slotted(h3) {\n color: darkred;\n }\n ::slotted(p) {\n font-style: italic;\n }\n <\/style>\n <div class=\"card\">\n <div class=\"card-header\">\n \n <slot name=\"card-title\">Varsay\u0131lan Ba\u015fl\u0131k<\/slot>\n <\/div>\n <div class=\"card-body\">\n \n <slot>Varsay\u0131lan \u0130\u00e7erik<\/slot>\n <\/div>\n <\/div>\n <\/template>\n\n \n <my-card>\n <h3 slot=\"card-title\">\u00d6zel Kart Ba\u015fl\u0131\u011f\u0131<\/h3>\n <p>Bu, \u00f6zel kart\u0131m\u0131n i\u00e7eri\u011fidir. Slotlar sayesinde d\u0131\u015far\u0131dan eklendi.<\/p>\n <p>\u0130kinci paragraf da burada.<\/p>\n <\/my-card>\n\n <my-card>\n <p>Bu kart\u0131n ba\u015fl\u0131\u011f\u0131 yok, varsay\u0131lan ba\u015fl\u0131k kullan\u0131lacak.<\/p>\n <p>Sadece varsay\u0131lan slotu kullan\u0131yorum.<\/p>\n <\/my-card>\n\n <script>\n class MyCard extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n\n \/\/ Template'i al\n const template = document.getElementById('my-card-template');\n \/\/ Template'in i\u00e7eri\u011fini klonla (derin klonlama i\u00e7in true)\n const content = template.content.cloneNode(true);\n\n \/\/ Klonlanan i\u00e7eri\u011fi Shadow DOM'a ekle\n this.shadowRoot.appendChild(content);\n }\n }\n customElements.define('my-card', MyCard);\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<p>Bu \u00f6rnekte:<br \/>\n1. <code><template id=\"my-card-template\"><\/code> i\u00e7inde kart\u0131m\u0131z\u0131n temel HTML yap\u0131s\u0131n\u0131 ve stilini tan\u0131mlad\u0131k.<br \/>\n2. <code>shadowRoot.innerHTML<\/code> yerine, JavaScript’te <code>template.content.cloneNode(true)<\/code> kullanarak template’in i\u00e7eri\u011fini kopyalad\u0131k ve Shadow DOM’a ekledik. <code>cloneNode(true)<\/code> \u00f6nemlidir, \u00e7\u00fcnk\u00fc template’in t\u00fcm alt elementlerini de kopyalar.<br \/>\n3. <code><slot name=\"card-title\"><\/code> ile isimli bir slot tan\u0131mlad\u0131k. Bu slot, <code><my-card><\/code> elementi i\u00e7ine <code>slot=\"card-title\"<\/code> niteli\u011fi ile eklenen i\u00e7eri\u011fi al\u0131r.<br \/>\n4. <code><slot><\/code> (isimsiz) ile varsay\u0131lan bir slot tan\u0131mlad\u0131k. Bu slot, herhangi bir <code>slot<\/code> niteli\u011fi belirtilmeden <code><my-card><\/code> i\u00e7ine yerle\u015ftirilen t\u00fcm di\u011fer i\u00e7erikleri al\u0131r.<br \/>\n5. <code>::slotted(h3)<\/code> ve <code>::slotted(p)<\/code> se\u00e7icileri, Shadow DOM i\u00e7inden, d\u0131\u015far\u0131dan slotlara yerle\u015ftirilen elementleri hedeflemek i\u00e7in kullan\u0131l\u0131r. Bu, Shadow DOM’un d\u0131\u015f\u0131ndaki i\u00e7eri\u011fi stilize etmenin tek yoludur.<\/p>\n<p>Template ve slotlar, bile\u015fenlerinizi daha esnek, okunabilir ve s\u00fcrd\u00fcr\u00fclebilir hale getirir. D\u0131\u015far\u0131dan farkl\u0131 i\u00e7eriklerle ayn\u0131 bile\u015fen yap\u0131s\u0131n\u0131 kullanman\u0131za olanak tan\u0131r.<\/p>\n<h3>\u00d6rnek Uygulama: Geli\u015fmi\u015f Bir \u00d6zel Element<\/h3>\n<p>\u015eimdi \u00f6\u011frendiklerimizi birle\u015ftirerek daha interaktif ve kullan\u0131\u015fl\u0131 bir \u00f6zel element olu\u015ftural\u0131m: bir saya\u00e7 bile\u015feni. Bu bile\u015fen, art\u0131rma ve azaltma d\u00fc\u011fmeleriyle bir say\u0131y\u0131 g\u00f6sterecek ve nitelikler arac\u0131l\u0131\u011f\u0131yla ba\u015flang\u0131\u00e7 de\u011ferini alabilecek.<\/p>\n<pre><code class=\"language-html\"><!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Geli\u015fmi\u015f \u00d6zel Element: Saya\u00e7<\/title>\n <style>\n body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; flex-direction: column; align-items: center; margin-top: 50px; }\n .container { display: flex; gap: 20px; }\n <\/style>\n<\/head>\n<body>\n \n\n <div class=\"container\">\n <my-counter start-value=\"10\"><\/my-counter>\n <my-counter start-value=\"0\"><\/my-counter>\n <my-counter><\/my-counter> \n <\/div>\n\n <template id=\"counter-template\">\n <style>\n .counter-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n border: 2px solid #007bff;\n border-radius: 10px;\n padding: 20px;\n box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n background-color: #e9f5ff;\n }\n .count-display {\n font-size: 3em;\n margin: 20px 0;\n color: #333;\n min-width: 80px;\n text-align: center;\n }\n .buttons {\n display: flex;\n gap: 10px;\n }\n button {\n background-color: #007bff;\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 5px;\n font-size: 1.2em;\n cursor: pointer;\n transition: background-color 0.3s ease;\n }\n button:hover {\n background-color: #0056b3;\n }\n button:active {\n background-color: #004085;\n }\n <\/style>\n <div class=\"counter-wrapper\">\n <div class=\"count-display\" id=\"count\">0<\/div>\n <div class=\"buttons\">\n <button id=\"decrement\">-<\/button>\n <button id=\"increment\">+<\/button>\n <\/div>\n <\/div>\n <\/template>\n\n <script>\n class MyCounter extends HTMLElement {\n static get observedAttributes() {\n return ['start-value'];\n }\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n\n const template = document.getElementById('counter-template');\n const content = template.content.cloneNode(true);\n this.shadowRoot.appendChild(content);\n\n this._count = 0; \/\/ Dahili saya\u00e7 durumu\n this._countDisplay = this.shadowRoot.getElementById('count');\n this._decrementButton = this.shadowRoot.getElementById('decrement');\n this._incrementButton = this.shadowRoot.getElementById('increment');\n }\n\n connectedCallback() {\n \/\/ Nitelikten ba\u015flang\u0131\u00e7 de\u011ferini al veya varsay\u0131lan\u0131 kullan\n const initialValue = parseInt(this.getAttribute('start-value') || '0', 10);\n this.count = initialValue; \/\/ setter'\u0131 \u00e7a\u011f\u0131r\u0131r\n\n this._decrementButton.addEventListener('click', this._decrement.bind(this));\n this._incrementButton.addEventListener('click', this._increment.bind(this));\n }\n\n disconnectedCallback() {\n \/\/ Olay dinleyicilerini temizle\n this._decrementButton.removeEventListener('click', this._decrement.bind(this));\n this._incrementButton.removeEventListener('click', this._increment.bind(this));\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n if (name === 'start-value' && oldValue !== newValue) {\n this.count = parseInt(newValue || '0', 10);\n }\n }\n\n \/\/ count \u00f6zelli\u011fini (property) tan\u0131mla\n get count() {\n return this._count;\n }\n\n set count(value) {\n this._count = value;\n this._updateDisplay();\n }\n\n _increment() {\n this.count++;\n \/\/ \u00d6zel bir olay tetikleyebiliriz\n this.dispatchEvent(new CustomEvent('count-changed', {\n detail: { value: this.count },\n bubbles: true, \/\/ Olay\u0131n DOM a\u011fac\u0131nda yukar\u0131 yay\u0131lmas\u0131n\u0131 sa\u011flar\n composed: true \/\/ Shadow DOM s\u0131n\u0131rlar\u0131n\u0131 a\u015fmas\u0131n\u0131 sa\u011flar\n }));\n }\n\n _decrement() {\n this.count--;\n this.dispatchEvent(new CustomEvent('count-changed', {\n detail: { value: this.count },\n bubbles: true,\n composed: true\n }));\n }\n\n _updateDisplay() {\n this._countDisplay.textContent = this.count;\n }\n }\n\n customElements.define('my-counter', MyCounter);\n\n \/\/ \u00d6zel elementin d\u0131\u015f\u0131ndan olay\u0131 dinleyebiliriz\n document.querySelectorAll('my-counter').forEach(counter => {\n counter.addEventListener('count-changed', (event) => {\n console.log(<code>Saya\u00e7 de\u011feri de\u011fi\u015fti: ${event.detail.value} (kaynak: ${event.target.tagName})<\/code>);\n });\n });\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<p>Bu <code>my-counter<\/code> \u00f6rne\u011finde bir\u00e7ok \u00f6nemli noktay\u0131 ele ald\u0131k:<br \/>\n* <strong>Shadow DOM ve Template Kullan\u0131m\u0131:<\/strong> Bile\u015fenin HTML yap\u0131s\u0131 ve stilini <code><template><\/code> i\u00e7inde tan\u0131mlad\u0131k ve Shadow DOM’a ekledik. Bu, stillerin ve yap\u0131n\u0131n d\u0131\u015far\u0131dan izole olmas\u0131n\u0131 sa\u011flar.<br \/>\n* <strong>Ya\u015fam D\u00f6ng\u00fcs\u00fc Metotlar\u0131:<\/strong><br \/>\n * <code>constructor()<\/code>: Shadow DOM’u olu\u015fturur, template’i klonlar ve DOM elementlerine referanslar\u0131 al\u0131r.<br \/>\n * <code>connectedCallback()<\/code>: Element DOM’a ba\u011fland\u0131\u011f\u0131nda ba\u015flang\u0131\u00e7 de\u011ferini nitelikten al\u0131r, d\u00fc\u011fmelere olay dinleyicileri ekler. <code>bind(this)<\/code> kullanarak olay dinleyicilerinin <code>this<\/code> ba\u011flam\u0131n\u0131n do\u011fru olmas\u0131n\u0131 sa\u011flar\u0131z.<br \/>\n * <code>disconnectedCallback()<\/code>: Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in olay dinleyicilerini temizler.<br \/>\n * <code>attributeChangedCallback()<\/code>: <code>start-value<\/code> niteli\u011fi de\u011fi\u015fti\u011finde sayac\u0131 g\u00fcnceller.<br \/>\n * <code>static get observedAttributes()<\/code>: <code>start-value<\/code> niteli\u011fini g\u00f6zlemleyece\u011fimizi belirtir.<br \/>\n* <strong>Dahili Durum Y\u00f6netimi:<\/strong> <code>_count<\/code> \u00f6zel de\u011fi\u015fkeni ile saya\u00e7 de\u011ferini tutuyoruz. <code>get<\/code> ve <code>set<\/code> eri\u015fimcileri (accessors) kullanarak <code>count<\/code> \u00f6zelli\u011fini tan\u0131mlad\u0131k. <code>set count()<\/code> metodu, de\u011fer her de\u011fi\u015fti\u011finde ekran\u0131 g\u00fcncelleyen <code>_updateDisplay()<\/code> metodunu \u00e7a\u011f\u0131r\u0131r.<br \/>\n* <strong>\u00d6zel Olaylar (Custom Events):<\/strong> <code>_increment<\/code> ve <code>_decrement<\/code> metotlar\u0131, <code>CustomEvent<\/code> kullanarak <code>count-changed<\/code> ad\u0131nda \u00f6zel bir olay tetikler. Bu olay, bile\u015fenin d\u0131\u015f\u0131ndan dinlenebilir. <code>bubbles: true<\/code> olay\u0131n DOM a\u011fac\u0131nda yukar\u0131 yay\u0131lmas\u0131n\u0131, <code>composed: true<\/code> ise Shadow DOM s\u0131n\u0131rlar\u0131n\u0131 a\u015fmas\u0131n\u0131 sa\u011flar. Bu sayede, d\u0131\u015far\u0131daki JavaScript kodu bile\u015fenin durum de\u011fi\u015fikliklerine tepki verebilir.<\/p>\n<p>Bu \u00f6rnek, \u00f6zel elementlerin nas\u0131l g\u00fc\u00e7l\u00fc, kaps\u00fcllenmi\u015f ve etkile\u015fimli bile\u015fenler olu\u015fturmak i\u00e7in kullan\u0131labilece\u011fini net bir \u015fekilde g\u00f6stermektedir.<\/p>\n<h3>En \u0130yi Uygulamalar ve Dikkat Edilmesi Gerekenler<\/h3>\n<p>\u00d6zel elementler geli\u015ftirirken g\u00f6z \u00f6n\u00fcnde bulundurman\u0131z gereken baz\u0131 en iyi uygulamalar ve \u00f6nemli noktalar vard\u0131r:<\/p>\n<p>* <strong>\u0130simlendirme Kurallar\u0131:<\/strong> \u00d6zel element adlar\u0131 her zaman k\u0131sa \u00e7izgi (hyphen) i\u00e7ermelidir (\u00f6rn. <code>my-component<\/code>). Bu, standart bir HTML etiketiyle \u00e7ak\u0131\u015fmay\u0131 \u00f6nler ve taray\u0131c\u0131ya bunun \u00f6zel bir element oldu\u011funu bildirir.<br \/>\n* <strong>Kaps\u00fclleme:<\/strong> Her zaman Shadow DOM kullanmay\u0131 d\u00fc\u015f\u00fcn\u00fcn. Bu, bile\u015feninizin stil ve mant\u0131\u011f\u0131n\u0131n d\u0131\u015f d\u00fcnyadan izole kalmas\u0131n\u0131 sa\u011flar, b\u00f6ylece beklenmedik \u00e7ak\u0131\u015fmalar\u0131 \u00f6nler.<br \/>\n* <strong>Eri\u015filebilirlik (Accessibility – A11y):<\/strong> \u00d6zel elementlerinizin eri\u015filebilir oldu\u011fundan emin olun. Gerekirse ARIA niteliklerini (\u00f6rn. <code>aria-label<\/code>, <code>role<\/code>) Shadow DOM i\u00e7inde kullan\u0131n. Klavye navigasyonunu ve ekran okuyucu uyumlulu\u011funu test edin.<br \/>\n* <strong>Performans:<\/strong> B\u00fcy\u00fck ve karma\u015f\u0131k DOM manip\u00fclasyonlar\u0131n\u0131 <code>connectedCallback<\/code> i\u00e7inde yapmaktan ka\u00e7\u0131n\u0131n veya optimize edin. Gereksiz yeniden render i\u015flemlerini \u00f6nlemek i\u00e7in <code>attributeChangedCallback<\/code> i\u00e7inde sadece ilgili de\u011fi\u015fiklikleri i\u015fleyin.<br \/>\n* <strong>Durum Y\u00f6netimi:<\/strong> Basit bile\u015fenler i\u00e7in dahili durum y\u00f6netimi (\u00f6rne\u011fin, <code>_count<\/code> \u00f6rne\u011fi gibi) yeterlidir. Daha karma\u015f\u0131k uygulamalar i\u00e7in, Web Bile\u015fenleriyle uyumlu, hafif bir durum y\u00f6netimi k\u00fct\u00fcphanesi (\u00f6rn. Lit’in reaktif \u00f6zellikleri) veya global bir durum y\u00f6netim sistemi d\u00fc\u015f\u00fcnebilirsiniz.<br \/>\n* <strong>Taray\u0131c\u0131 Deste\u011fi ve Polyfill’ler:<\/strong> Modern taray\u0131c\u0131lar Web Bile\u015fenlerini yerel olarak destekler. Ancak eski taray\u0131c\u0131lar\u0131 desteklemeniz gerekiyorsa, Web Bile\u015fenleri polyfill’lerini (\u00f6rn. <code>@webcomponents\/webcomponentsjs<\/code>) kullanman\u0131z gerekebilir.<br \/>\n* <strong>Geli\u015ftirme Ara\u00e7lar\u0131 ve K\u00fct\u00fcphaneler:<\/strong> D\u00fcz JavaScript ile Web Bile\u015fenleri yazmak m\u00fcmk\u00fcn olsa da, Lit (eski ad\u0131yla LitElement) veya Stencil gibi k\u00fct\u00fcphaneler, boilerplate kodu azaltarak ve reaktif \u00f6zellikler, \u015fablon motorlar\u0131 gibi ek kolayl\u0131klar sunarak geli\u015ftirme s\u00fcrecini h\u0131zland\u0131rabilir. Bu k\u00fct\u00fcphaneler, temel Web Bile\u015fenleri API’si \u00fczerine in\u015fa edilmi\u015ftir ve performans\u0131 art\u0131r\u0131rken geli\u015ftirici deneyimini iyile\u015ftirir.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>“\u0130lk \u00d6zel Elementiniz” konusunu derinlemesine inceledi\u011fimiz bu makalede, Web Bile\u015fenleri’nin temelini olu\u015fturan \u00d6zel Elementler kavram\u0131n\u0131, ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131n\u0131, Shadow DOM ile kaps\u00fcllemeyi ve HTML template’leri ile i\u00e7erik da\u011f\u0131t\u0131m\u0131n\u0131 detayl\u0131 \u00f6rneklerle ele ald\u0131k. Kendi HTML etiketlerinizi tan\u0131mlayarak, kaps\u00fcllenmi\u015f, yeniden kullan\u0131labilir ve standartlara uygun bile\u015fenler olu\u015fturman\u0131n ne kadar g\u00fc\u00e7l\u00fc bir yakla\u015f\u0131m oldu\u011funu g\u00f6rd\u00fck.<\/p>\n<p>Web Bile\u015fenleri, modern web geli\u015ftirme i\u00e7in temel bir yap\u0131 ta\u015f\u0131d\u0131r. \u00c7er\u00e7eveden ba\u011f\u0131ms\u0131z olmalar\u0131, onlar\u0131 herhangi bir projeye entegre etmeyi kolayla\u015ft\u0131r\u0131r ve gelece\u011fe d\u00f6n\u00fck, s\u00fcrd\u00fcr\u00fclebilir kod yazman\u0131za olanak tan\u0131r. \u0130ster k\u00fc\u00e7\u00fck bir UI bile\u015feni, ister karma\u015f\u0131k bir uygulama par\u00e7as\u0131 olsun, \u00f6zel elementler, web’i daha mod\u00fcler ve y\u00f6netilebilir hale getirme yolunda \u00f6nemli bir ad\u0131md\u0131r. \u0130lk \u00f6zel elementinizi olu\u015fturarak, bu heyecan verici ve g\u00fc\u00e7l\u00fc teknolojinin kap\u0131lar\u0131n\u0131 aralam\u0131\u015f oldunuz. Art\u0131k kendi bile\u015fenlerinizi tasarlayabilir, geli\u015ftirebilir ve web’i daha da zenginle\u015ftirebilirsiniz.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"\u0130lk \u00d6zel Elementiniz: Web Bile\u015fenleri D\u00fcnyas\u0131na Ad\u0131m\nWeb geli\u015ftirme d\u00fcnyas\u0131, s\u00fcrekli evrilen teknolojiler ve daha verimli, yeniden kullan\u0131","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-31326","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>\u0130lk \u00d6zel Elementiniz: Web Bile\u015fenleri D\u00fcnyas\u0131na Ad\u0131m - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0130lk \u00d6zel Elementiniz: Web Bile\u015fenleri D\u00fcnyas\u0131na Ad\u0131m\" \/>\n<meta property=\"og:description\" content=\"\u0130lk \u00d6zel Elementiniz: Web Bile\u015fenleri D\u00fcnyas\u0131na Ad\u0131m Web geli\u015ftirme d\u00fcnyas\u0131, s\u00fcrekli evrilen teknolojiler ve daha verimli, yeniden kullan\u0131\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-08T13:41:37+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"\u0130lk \u00d6zel Elementiniz: Web Bile\u015fenleri D\u00fcnyas\u0131na Ad\u0131m\",\"datePublished\":\"2025-10-08T13:41:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/\"},\"wordCount\":2487,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/\",\"name\":\"\u0130lk \u00d6zel Elementiniz: Web Bile\u015fenleri D\u00fcnyas\u0131na Ad\u0131m - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-08T13:41:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0130lk \u00d6zel Elementiniz: Web Bile\u015fenleri D\u00fcnyas\u0131na Ad\u0131m\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n","yoast_head_json":{"title":"\u0130lk \u00d6zel Elementiniz: Web Bile\u015fenleri D\u00fcnyas\u0131na Ad\u0131m - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/","og_locale":"tr_TR","og_type":"article","og_title":"\u0130lk \u00d6zel Elementiniz: Web Bile\u015fenleri D\u00fcnyas\u0131na Ad\u0131m","og_description":"\u0130lk \u00d6zel Elementiniz: Web Bile\u015fenleri D\u00fcnyas\u0131na Ad\u0131m Web geli\u015ftirme d\u00fcnyas\u0131, s\u00fcrekli evrilen teknolojiler ve daha verimli, yeniden kullan\u0131","og_url":"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-08T13:41:37+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"13 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"\u0130lk \u00d6zel Elementiniz: Web Bile\u015fenleri D\u00fcnyas\u0131na Ad\u0131m","datePublished":"2025-10-08T13:41:37+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/"},"wordCount":2487,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/","url":"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/","name":"\u0130lk \u00d6zel Elementiniz: Web Bile\u015fenleri D\u00fcnyas\u0131na Ad\u0131m - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-08T13:41:37+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"\u0130lk \u00d6zel Elementiniz: Web Bile\u015fenleri D\u00fcnyas\u0131na Ad\u0131m"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=31326"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31326\/revisions"}],"predecessor-version":[{"id":31327,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31326\/revisions\/31327"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=31326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=31326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=31326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":31326,"date":"2025-10-08T16:41:37","date_gmt":"2025-10-08T13:41:37","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=31326"},"modified":"2025-10-08T16:41:37","modified_gmt":"2025-10-08T13:41:37","slug":"ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/ilk-ozel-elementiniz-web-bilesenleri-dunyasina-adim\/","title":{"rendered":"\u0130lk \u00d6zel Elementiniz: Web Bile\u015fenleri D\u00fcnyas\u0131na Ad\u0131m"},"content":{"rendered":"

<\/p>\n

\u0130lk \u00d6zel Elementiniz: Web Bile\u015fenleri D\u00fcnyas\u0131na Ad\u0131m<\/h2>\n
Web geli\u015ftirme d\u00fcnyas\u0131, s\u00fcrekli evrilen teknolojiler ve daha verimli, yeniden kullan\u0131labilir ve s\u00fcrd\u00fcr\u00fclebilir kod yazma aray\u0131\u015f\u0131yla doludur. Bu aray\u0131\u015f\u0131n \u00f6nemli duraklar\u0131ndan biri de “Web Bile\u015fenleri” (Web Components) teknolojisidir. Web Bile\u015fenleri, geli\u015ftiricilere taray\u0131c\u0131 taraf\u0131ndan do\u011frudan anla\u015f\u0131lan, kendi \u00f6zel HTML etiketlerini olu\u015fturma yetene\u011fi sunarak, modern web uygulamalar\u0131n\u0131n temel ta\u015flar\u0131ndan biri haline gelmi\u015ftir. Bu makalede, Web Bile\u015fenleri’nin d\u00f6rt ana prensibinden biri olan “\u00d6zel Elementler” (Custom Elements) kavram\u0131na odaklanacak, ilk \u00f6zel elementinizi nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m inceleyecek ve bu g\u00fc\u00e7l\u00fc teknolojinin sundu\u011fu avantajlar\u0131 derinlemesine ke\u015ffedece\u011fiz.<\/p>\n

Web Bile\u015fenleri Nedir ve Neden \u00d6nemlidir?<\/h3>\n

Web Bile\u015fenleri, web standartlar\u0131na dayal\u0131 bir teknoloji setidir ve geli\u015ftiricilere, kendi HTML etiketlerini olu\u015fturma, bunlar\u0131 JavaScript ile geni\u015fletme ve CSS ile stilize etme imkan\u0131 tan\u0131r. Bu sayede, karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczlerini (UI) k\u00fc\u00e7\u00fck, izole ve yeniden kullan\u0131labilir par\u00e7alara b\u00f6lmek m\u00fcmk\u00fcn hale gelir. Bu par\u00e7alar, herhangi bir JavaScript \u00e7er\u00e7evesinden ba\u011f\u0131ms\u0131z olarak \u00e7al\u0131\u015fabilir ve farkl\u0131 projelerde kolayca kullan\u0131labilir.<\/p>\n

Web Bile\u015fenleri’nin temel amac\u0131, bile\u015fen tabanl\u0131 mimarinin faydalar\u0131n\u0131 do\u011frudan taray\u0131c\u0131ya getirmektir:
\n* Yeniden Kullan\u0131labilirlik (Reusability):<\/strong> Bir kez yaz\u0131lan bir bile\u015fen, farkl\u0131 projelerde veya bir projenin farkl\u0131 yerlerinde tekrar tekrar kullan\u0131labilir.
\n* Kaps\u00fclleme (Encapsulation):<\/strong> Bile\u015fenlerin i\u00e7 yap\u0131s\u0131 (HTML, CSS ve JavaScript), d\u0131\u015f d\u00fcnyadan izole edilir. Bu, stil \u00e7ak\u0131\u015fmalar\u0131n\u0131 ve mant\u0131k \u00e7at\u0131\u015fmalar\u0131n\u0131 \u00f6nler.
\n* Birlikte \u00c7al\u0131\u015fabilirlik (Interoperability):<\/strong> Web Bile\u015fenleri, taray\u0131c\u0131 standartlar\u0131 \u00fczerine in\u015fa edildi\u011fi i\u00e7in, herhangi bir JavaScript \u00e7er\u00e7evesiyle (React, Angular, Vue gibi) veya \u00e7er\u00e7evesiz d\u00fcz JavaScript ile sorunsuz bir \u015fekilde \u00e7al\u0131\u015fabilir.<\/p>\n

Web Bile\u015fenleri d\u00f6rt ana standarttan olu\u015fur:
\n1. Custom Elements (\u00d6zel Elementler):<\/strong> Kendi HTML etiketlerinizi tan\u0131mlaman\u0131z\u0131 ve onlar\u0131n davran\u0131\u015flar\u0131n\u0131 belirlemenizi sa\u011flar.
\n2. Shadow DOM (G\u00f6lge DOM):<\/strong> Bir elementin i\u00e7 yap\u0131s\u0131n\u0131 (HTML ve CSS) d\u0131\u015far\u0131dan izole etmenizi sa\u011flayan kaps\u00fclleme mekanizmas\u0131d\u0131r.
\n3. HTML Templates (