এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

কাস্টম উপাদানগুলির সাথে কাজ করা

Boris Smus

ভূমিকা

ওয়েব তীব্রভাবে অভিব্যক্তি অভাব. আমি কি বলতে চাইছি তা দেখতে, GMail এর মত একটি "আধুনিক" ওয়েব অ্যাপে উঁকি দিন:

<div> স্যুপ সম্পর্কে আধুনিক কিছু নেই। এবং এখনও, এইভাবে আমরা ওয়েব অ্যাপস তৈরি করি। এটা দুঃখজনক. আমাদের প্ল্যাটফর্ম থেকে আরও কিছু দাবি করা উচিত নয়?

সেক্সি মার্কআপ। এটা একটা জিনিস করা যাক

HTML আমাদের একটি নথি গঠনের জন্য একটি চমৎকার টুল দেয় কিন্তু এর শব্দভান্ডার এইচটিএমএল স্ট্যান্ডার্ড সংজ্ঞায়িত উপাদানগুলির মধ্যে সীমাবদ্ধ।

GMail এর জন্য মার্কআপ নৃশংস না হলে কি হবে? এটা সুন্দর হলে কি হবে:

<hangout-module>
    <hangout-chat from="Paul, Addy">
    <hangout-discussion>
        <hangout-message from="Paul" profile="profile.png"
            profile="118075919496626375791" datetime="2013-07-17T12:02">
        <p>Feelin' this Web Components thing.
        <p>Heard of it?
        </hangout-message>
    </hangout-discussion>
    </hangout-chat>
    <hangout-chat>...</hangout-chat>
</hangout-module>

কত সতেজ! এই অ্যাপ্লিকেশনটি সম্পূর্ণরূপে অর্থপূর্ণ করে তোলে। এটি অর্থপূর্ণ , বোঝা সহজ এবং সর্বোপরি, এটি বজায় রাখা যায় । ভবিষ্যৎ আমি/আপনি জানতে পারবেন এটি ঠিক কী করে শুধু এর ঘোষণামূলক ব্যাকবোন পরীক্ষা করে।

শুরু হচ্ছে

কাস্টম উপাদানগুলি ওয়েব ডেভেলপারদের নতুন ধরনের HTML উপাদানগুলিকে সংজ্ঞায়িত করার অনুমতি দেয় ৷ স্পেকটি ওয়েব কম্পোনেন্টস ছাতার নীচে অবতরণ করা বেশ কয়েকটি নতুন API আদিমগুলির মধ্যে একটি, তবে এটি সম্ভবত সবচেয়ে গুরুত্বপূর্ণ। কাস্টম উপাদান দ্বারা আনলক করা বৈশিষ্ট্যগুলি ছাড়া ওয়েব উপাদানগুলি বিদ্যমান নেই:

নতুন HTML/DOM উপাদান সংজ্ঞায়িত করুন
অন্যান্য উপাদান থেকে প্রসারিত উপাদান তৈরি করুন
কাস্টম কার্যকারিতাকে একটি একক ট্যাগে লজিক্যালি বান্ডিল করুন
বিদ্যমান DOM উপাদানগুলির API প্রসারিত করুন

নতুন উপাদান নিবন্ধন

কাস্টম উপাদানগুলি document.registerElement() ব্যবহার করে তৈরি করা হয়:

var XFoo = document.registerElement('x-foo');
document.body.appendChild(new XFoo());

document.registerElement() এর প্রথম আর্গুমেন্ট হল এলিমেন্টের ট্যাগ নাম। নামটিতে অবশ্যই একটি ড্যাশ (-) থাকতে হবে । সুতরাং উদাহরণস্বরূপ, <x-tags> , <my-element> , এবং <my-awesome-app> সব বৈধ নাম, যখন <tabs> এবং <foo_bar> নয়। এই বিধিনিষেধটি পার্সারকে নিয়মিত উপাদান থেকে কাস্টম উপাদানগুলিকে আলাদা করতে দেয় তবে HTML-এ নতুন ট্যাগ যুক্ত করা হলে ফরোয়ার্ড সামঞ্জস্যতা নিশ্চিত করে।

দ্বিতীয় যুক্তিটি হল একটি (ঐচ্ছিক) বস্তু যা উপাদানটির prototype বর্ণনা করে। এটি আপনার উপাদানগুলিতে কাস্টম কার্যকারিতা (যেমন সর্বজনীন বৈশিষ্ট্য এবং পদ্ধতি) যোগ করার জায়গা। পরে যে আরো .

ডিফল্টরূপে, কাস্টম উপাদানগুলি HTMLElement থেকে উত্তরাধিকার সূত্রে প্রাপ্ত। সুতরাং, পূর্ববর্তী উদাহরণটি এর সমতুল্য:

var XFoo = document.registerElement('x-foo', {
    prototype: Object.create(HTMLElement.prototype)
});

document.registerElement('x-foo') এ একটি কল ব্রাউজারকে নতুন উপাদান সম্পর্কে শিক্ষা দেয় এবং একটি কনস্ট্রাক্টর প্রদান করে যা আপনি <x-foo> এর উদাহরণ তৈরি করতে ব্যবহার করতে পারেন। বিকল্পভাবে, আপনি যদি কনস্ট্রাক্টর ব্যবহার করতে না চান তাহলে উপাদানগুলিকে তাত্ক্ষণিক করার অন্যান্য কৌশলগুলি ব্যবহার করতে পারেন।

দ্রষ্টব্য: যদি এটি অবাঞ্ছিত হয় যে কনস্ট্রাক্টরটি গ্লোবাল window অবজেক্টে শেষ হয়, তবে এটিকে একটি নামস্থানে রাখুন ( var myapp = {}; myapp.XFoo = document.registerElement('x-foo'); ) বা মেঝেতে ফেলে দিন .

প্রসারিত উপাদান

কাস্টম উপাদানগুলি আপনাকে বিদ্যমান (নেটিভ) HTML উপাদানগুলির পাশাপাশি অন্যান্য কাস্টম উপাদানগুলিকে প্রসারিত করতে দেয়৷ একটি উপাদান প্রসারিত করার জন্য, আপনাকে registerElement() উপাদানটির নাম এবং prototype পাস করতে হবে যা থেকে উত্তরাধিকারসূত্রে পাওয়া যাবে।

নেটিভ উপাদান প্রসারিত

বলুন আপনি নিয়মিত জো <button> নিয়ে খুশি নন। আপনি "মেগা বোতাম" হওয়ার জন্য এর ক্ষমতাগুলিকে সুপারচার্জ করতে চান। <button> উপাদানটি প্রসারিত করতে, একটি নতুন উপাদান তৈরি করুন যা HTMLButtonElement এর prototype উত্তরাধিকার সূত্রে প্রাপ্ত এবং উপাদানটির নাম extends । এই ক্ষেত্রে, "বোতাম":

var MegaButton = document.registerElement('mega-button', {
    prototype: Object.create(HTMLButtonElement.prototype),
    extends: 'button'
});

দ্রষ্টব্য: উপাদান A তৈরি করতে যা উপাদান B কে প্রসারিত করে, উপাদান A অবশ্যই উপাদান B এর prototype উত্তরাধিকারী হবে।

কাস্টম উপাদান যা নেটিভ উপাদান থেকে উত্তরাধিকারসূত্রে পাওয়া যায় তাকে টাইপ এক্সটেনশন কাস্টম উপাদান বলা হয়। তারা HTMLElement এর একটি বিশেষ সংস্করণ থেকে উত্তরাধিকারসূত্রে প্রাপ্ত একটি উপায় হিসাবে, "এলিমেন্ট X একটি Y"।

উদাহরণ:

<button is="mega-button">

একটি কাস্টম উপাদান প্রসারিত

একটি <x-foo-extended> উপাদান তৈরি করতে যা <x-foo> কাস্টম উপাদানকে প্রসারিত করে, কেবলমাত্র এর প্রোটোটাইপ উত্তরাধিকার সূত্রে প্রাপ্ত করুন এবং বলুন যে আপনি কোন ট্যাগ থেকে উত্তরাধিকারসূত্রে পাচ্ছেন:

var XFooProto = Object.create(HTMLElement.prototype);
...

var XFooExtended = document.registerElement('x-foo-extended', {
    prototype: XFooProto,
    extends: 'x-foo'
});

উপাদান প্রোটোটাইপ তৈরির বিষয়ে আরও তথ্যের জন্য নীচে JS বৈশিষ্ট্য এবং পদ্ধতি যোগ করা দেখুন।

কিভাবে উপাদান আপগ্রেড করা হয়

আপনি কি কখনও ভেবে দেখেছেন কেন এইচটিএমএল পার্সার অ-মানক ট্যাগগুলিতে ফিট করে না? উদাহরণস্বরূপ, আমরা যদি পৃষ্ঠায় <randomtag> ঘোষণা করি তবে এটি পুরোপুরি খুশি। HTML স্পেসিফিকেশন অনুযায়ী:

দ্রষ্টব্য: HTMLUnknownElement ইন্টারফেস অবশ্যই HTML উপাদানগুলির জন্য ব্যবহার করা উচিত যা এই স্পেসিফিকেশন দ্বারা সংজ্ঞায়িত করা হয়নি।

দুঃখিত <randomtag> ! আপনি অ-মানক এবং HTMLUnknownElement থেকে উত্তরাধিকারী।

একই কাস্টম উপাদানের জন্য সত্য নয়. বৈধ কাস্টম উপাদান নাম সহ উপাদানগুলি HTMLElement থেকে উত্তরাধিকার সূত্রে প্রাপ্ত৷ আপনি কনসোল ফায়ার করে এই সত্যটি যাচাই করতে পারেন: Ctrl + Shift + J (বা Cmd + Opt + J Mac এ), এবং কোডের নিম্নলিখিত লাইনগুলিতে পেস্ট করুন; তারা true ফিরে:

// "tabs" is not a valid custom element name
document.createElement('tabs').__proto__ === HTMLUnknownElement.prototype

// "x-tabs" is a valid custom element name
document.createElement('x-tabs').__proto__ == HTMLElement.prototype

দ্রষ্টব্য: <x-tabs> ব্রাউজারগুলিতে এখনও একটি HTMLUnknownElement হবে যা document.registerElement() সমর্থন করে না।

অমীমাংসিত উপাদান

যেহেতু কাস্টম উপাদানগুলি document.registerElement() ব্যবহার করে স্ক্রিপ্ট দ্বারা নিবন্ধিত হয়, তাই ব্রাউজার দ্বারা তাদের সংজ্ঞা নিবন্ধিত হওয়ার আগে সেগুলি ঘোষণা বা তৈরি করা যেতে পারে । উদাহরণস্বরূপ, আপনি পৃষ্ঠায় <x-tabs> ঘোষণা করতে পারেন কিন্তু অনেক পরে document.registerElement('x-tabs') শুরু করতে পারেন।

উপাদানগুলিকে তাদের সংজ্ঞায় আপগ্রেড করার আগে, সেগুলিকে অমীমাংসিত উপাদান বলা হয়। এইগুলি হল HTML উপাদান যেগুলির একটি বৈধ কাস্টম উপাদানের নাম রয়েছে কিন্তু নিবন্ধিত হয়নি৷

এই টেবিলটি জিনিসগুলি সোজা রাখতে সাহায্য করতে পারে:

নাম	থেকে উত্তরাধিকারসূত্রে পাওয়া যায়	উদাহরণ
অমীমাংসিত উপাদান	`HTMLElement`	`<x-tabs>` , `<my-element>`
অজানা উপাদান	`HTMLUnknownElement`	`<tabs>` , `<foo_bar>`

তাত্ক্ষণিক উপাদান

উপাদান তৈরির সাধারণ কৌশল এখনও কাস্টম উপাদানগুলিতে প্রযোজ্য। যেকোনো স্ট্যান্ডার্ড এলিমেন্টের মতো, এগুলিকে HTML-এ ঘোষণা করা যেতে পারে বা জাভাস্ক্রিপ্ট ব্যবহার করে DOM-এ তৈরি করা যেতে পারে।

কাস্টম ট্যাগ ইনস্ট্যান্টিয়েটিং

তাদের ঘোষণা করুন :

<x-foo></x-foo>

JS এ DOM তৈরি করুন :

var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
    alert('Thanks!');
});

new অপারেটর ব্যবহার করুন:

var xFoo = new XFoo();
document.body.appendChild(xFoo);

ইনস্ট্যান্টিয়েটিং টাইপ এক্সটেনশন উপাদান

টাইপ এক্সটেনশন-স্টাইল কাস্টম উপাদানগুলিকে তাত্ক্ষণিকভাবে কাস্টম ট্যাগের কাছাকাছি।

তাদের ঘোষণা করুন :

<!-- <button> "is a" mega button -->
<button is="mega-button">

JS এ DOM তৈরি করুন :

var megaButton = document.createElement('button', 'mega-button');
// megaButton instanceof MegaButton === true

আপনি দেখতে পাচ্ছেন, এখন document.createElement() এর একটি ওভারলোডেড সংস্করণ রয়েছে যা is="" বৈশিষ্ট্যটিকে তার দ্বিতীয় প্যারামিটার হিসাবে নেয়।

new অপারেটর ব্যবহার করুন:

var megaButton = new MegaButton();
document.body.appendChild(megaButton);

এখন পর্যন্ত, আমরা শিখেছি কিভাবে document.registerElement() ব্যবহার করতে হয় ব্রাউজারকে একটি নতুন ট্যাগ সম্পর্কে জানাতে…কিন্তু এটি তেমন কিছু করে না। এর বৈশিষ্ট্য এবং পদ্ধতি যোগ করা যাক.

JS বৈশিষ্ট্য এবং পদ্ধতি যোগ করা হচ্ছে

কাস্টম উপাদান সম্পর্কে শক্তিশালী জিনিস হল যে আপনি উপাদানের সংজ্ঞায় বৈশিষ্ট্য এবং পদ্ধতি সংজ্ঞায়িত করে উপাদানের সাথে উপযোগী কার্যকারিতা বান্ডিল করতে পারেন। আপনার উপাদানের জন্য একটি সর্বজনীন API তৈরি করার উপায় হিসাবে এটিকে ভাবুন।

এখানে একটি সম্পূর্ণ উদাহরণ:

var XFooProto = Object.create(HTMLElement.prototype);

// 1. Give x-foo a foo() method.
XFooProto.foo = function() {
    alert('foo() called');
};

// 2. Define a property read-only "bar".
Object.defineProperty(XFooProto, "bar", {value: 5});

// 3. Register x-foo's definition.
var XFoo = document.registerElement('x-foo', {prototype: XFooProto});

// 4. Instantiate an x-foo.
var xfoo = document.createElement('x-foo');

// 5. Add it to the page.
document.body.appendChild(xfoo);

অবশ্যই একটি prototype নির্মাণের হাজার হাজার উপায় আছে। আপনি যদি এই ধরনের প্রোটোটাইপ তৈরির অনুরাগী না হন তবে এখানে একই জিনিসের আরও ঘনীভূত সংস্করণ রয়েছে:

var XFoo = document.registerElement('x-foo', {
  prototype: Object.create(HTMLElement.prototype, {
    bar: {
      get: function () {
        return 5;
      }
    },
    foo: {
      value: function () {
        alert('foo() called');
      }
    }
  })
});

প্রথম বিন্যাসটি ES5 Object.defineProperty ব্যবহার করার অনুমতি দেয়। দ্বিতীয়টি get/set ব্যবহার করার অনুমতি দেয়।

লাইফসাইকেল কলব্যাক পদ্ধতি

উপাদানগুলি তাদের অস্তিত্বের আকর্ষণীয় সময়ে ট্যাপ করার জন্য বিশেষ পদ্ধতিগুলি সংজ্ঞায়িত করতে পারে। এই পদ্ধতিগুলি যথাযথভাবে লাইফসাইকেল কলব্যাক নামে পরিচিত। প্রতিটির একটি নির্দিষ্ট নাম এবং উদ্দেশ্য রয়েছে:

কলব্যাক নাম	যখন ডাকল
কলব্যাক তৈরি করেছে	উপাদানটির একটি উদাহরণ তৈরি করা হয়
সংযুক্ত কলব্যাক	নথিতে একটি উদাহরণ ঢোকানো হয়েছে
বিচ্ছিন্ন কলব্যাক	নথি থেকে একটি উদাহরণ সরানো হয়েছে
attributeChangedCallback(attrName, oldVal, newVal)	একটি বৈশিষ্ট্য যোগ করা, সরানো বা আপডেট করা হয়েছে

উদাহরণ: <x-foo> -এ createdCallback() এবং attachedCallback() সংজ্ঞায়িত করা :

var proto = Object.create(HTMLElement.prototype);

proto.createdCallback = function() {...};
proto.attachedCallback = function() {...};

var XFoo = document.registerElement('x-foo', {prototype: proto});

সমস্ত লাইফসাইকেল কলব্যাক ঐচ্ছিক , তবে সেগুলিকে সংজ্ঞায়িত করুন যদি/যখন এটি অর্থপূর্ণ হয়৷ উদাহরণস্বরূপ, বলুন আপনার উপাদান যথেষ্ট জটিল এবং createdCallback() এ IndexedDB এর সাথে একটি সংযোগ খোলে। এটি DOM থেকে সরানোর আগে, detachedCallback() এ প্রয়োজনীয় পরিষ্কারের কাজ করুন। দ্রষ্টব্য: আপনার এটির উপর নির্ভর করা উচিত নয়, উদাহরণস্বরূপ, যদি ব্যবহারকারী ট্যাবটি বন্ধ করে দেয় তবে এটিকে একটি সম্ভাব্য অপ্টিমাইজেশন হুক হিসাবে ভাবুন৷

আরেকটি ব্যবহারের ক্ষেত্রে লাইফসাইকেল কলব্যাক হল উপাদানটিতে ডিফল্ট ইভেন্ট শ্রোতাদের সেট আপ করার জন্য:

proto.createdCallback = function() {
  this.addEventListener('click', function(e) {
    alert('Thanks!');
  });
};

মার্কআপ যোগ করা হচ্ছে

আমরা <x-foo> তৈরি করেছি, এটিকে একটি JavaScript API দিয়েছি, কিন্তু এটি ফাঁকা! আমরা কি রেন্ডার করার জন্য কিছু HTML দেব?

লাইফসাইকেল কলব্যাক এখানে কাজে আসে। বিশেষত, আমরা কিছু ডিফল্ট এইচটিএমএল সহ একটি উপাদান প্রদান করার জন্য createdCallback() ব্যবহার করতে পারি:

var XFooProto = Object.create(HTMLElement.prototype);

XFooProto.createdCallback = function() {
    this.innerHTML = "**I'm an x-foo-with-markup!**";
};

var XFoo = document.registerElement('x-foo-with-markup', {prototype: XFooProto});

এই ট্যাগটি চালু করা এবং DevTools-এ পরিদর্শন করা (রাইট-ক্লিক করুন, উপাদান পরিদর্শন নির্বাচন করুন) দেখানো উচিত:

▾<x-foo-with-markup>
  **I'm an x-foo-with-markup!**
</x-foo-with-markup>

শ্যাডো DOM-এ ইন্টারনাল এনক্যাপসুলেট করা

নিজে থেকেই, Shadow DOM হল কন্টেন্ট এনক্যাপসুলেট করার জন্য একটি শক্তিশালী টুল। কাস্টম উপাদানগুলির সাথে এটি ব্যবহার করুন এবং জিনিসগুলি যাদুকর হয়ে উঠবে!

ছায়া DOM কাস্টম উপাদান দেয়:

তাদের সাহস লুকানোর একটি উপায়, এইভাবে ব্যবহারকারীদের রক্তাক্ত বাস্তবায়নের বিবরণ থেকে রক্ষা করে।
শৈলী এনক্যাপসুলেশন …ফো' বিনামূল্যে.

Shadow DOM থেকে একটি উপাদান তৈরি করা একটি তৈরি করার মতো যা মৌলিক মার্কআপ রেন্ডার করে। পার্থক্য createdCallback() এ:

var XFooProto = Object.create(HTMLElement.prototype);

XFooProto.createdCallback = function() {
    // 1. Attach a shadow root on the element.
    var shadow = this.createShadowRoot();

    // 2. Fill it with markup goodness.
    shadow.innerHTML = "**I'm in the element's Shadow DOM!**";
};

var XFoo = document.registerElement('x-foo-shadowdom', {prototype: XFooProto});

উপাদানটির .innerHTML সেট করার পরিবর্তে, আমি <x-foo-shadowdom> এর জন্য একটি শ্যাডো রুট তৈরি করেছি এবং তারপরে এটি মার্কআপ দিয়ে পূরণ করেছি। DevTools-এ "Show Shadow DOM" সেটিং সক্ষম করে, আপনি একটি #shadow-root দেখতে পাবেন যা প্রসারিত করা যেতে পারে:

▾<x-foo-shadowdom>
  ▾#shadow-root
    **I'm in the element's Shadow DOM!**
</x-foo-shadowdom>

যে ছায়া গোড়া!

একটি টেমপ্লেট থেকে উপাদান তৈরি করা

এইচটিএমএল টেমপ্লেট হল আরেকটি নতুন API আদিম যা কাস্টম উপাদানের জগতে সুন্দরভাবে ফিট করে।

উদাহরণ: একটি <template> এবং ছায়া DOM থেকে তৈরি একটি উপাদান নিবন্ধন করা:

<template id="sdtemplate">
  <style>
    p { color: orange; }
  </style>
  <p>I'm in Shadow DOM. My markup was stamped from a <template&gt;.
</template>

<script>
  var proto = Object.create(HTMLElement.prototype, {
    createdCallback: {
      value: function() {
        var t = document.querySelector('#sdtemplate');
        var clone = document.importNode(t.content, true);
        this.createShadowRoot().appendChild(clone);
      }
    }
  });
  document.registerElement('x-foo-from-template', {prototype: proto});
</script>

<template id="sdtemplate">
  <style>:host p { color: orange; }</style>
  <p>I'm in Shadow DOM. My markup was stamped from a <template&gt;.
</template>

<div class="demoarea">
  <x-foo-from-template></x-foo-from-template>
</div>

এই কয়েক লাইন কোড প্যাক অনেক মুষ্ট্যাঘাত. আসুন আমরা যা ঘটছে তা বুঝতে পারি:

আমরা HTML এ একটি নতুন উপাদান নিবন্ধন করেছি: <x-foo-from-template>
উপাদানটির DOM একটি <template> থেকে তৈরি করা হয়েছিল
শ্যাডো ডম ব্যবহার করে উপাদানটির ভীতিকর বিবরণ লুকিয়ে রাখা হয়েছে
Shadow DOM এলিমেন্ট স্টাইল এনক্যাপসুলেশন দেয় (যেমন p {color: orange;} পুরো পৃষ্ঠাটিকে কমলা করে দিচ্ছে না)

খুব ভাল!

কাস্টম উপাদান স্টাইলিং

যেকোনো HTML ট্যাগের মতো, আপনার কাস্টম ট্যাগের ব্যবহারকারীরা নির্বাচকদের সাথে এটিকে স্টাইল করতে পারে:

<style>
  app-panel {
    display: flex;
  }
  [is="x-item"] {
    transition: opacity 400ms ease-in-out;
    opacity: 0.3;
    flex: 1;
    text-align: center;
    border-radius: 50%;
  }
  [is="x-item"]:hover {
    opacity: 1.0;
    background: rgb(255, 0, 255);
    color: white;
  }
  app-panel > [is="x-item"] {
    padding: 5px;
    list-style: none;
    margin: 0 7px;
  }
</style>

<app-panel>
    <li is="x-item">Do</li>
    <li is="x-item">Re</li>
    <li is="x-item">Mi</li>
</app-panel>

শ্যাডো ডম ব্যবহার করে এমন স্টাইলিং উপাদান

আপনি যখন শ্যাডো ডমকে মিশ্রণে আনেন তখন খরগোশের গর্তটি অনেক গভীরে যায়। শ্যাডো ডম ব্যবহার করে এমন কাস্টম উপাদানগুলি এর দুর্দান্ত সুবিধাগুলি উত্তরাধিকারী করে।

শ্যাডো ডম স্টাইল এনক্যাপসুলেশন সহ একটি উপাদানকে ইনফিউজ করে। শ্যাডো রুটে সংজ্ঞায়িত শৈলীগুলি হোস্ট থেকে বেরিয়ে আসে না এবং পৃষ্ঠা থেকে রক্তপাত হয় না। একটি কাস্টম উপাদানের ক্ষেত্রে, উপাদানটি নিজেই হোস্ট। শৈলী এনক্যাপসুলেশনের বৈশিষ্ট্যগুলি কাস্টম উপাদানগুলিকে নিজেদের জন্য ডিফল্ট শৈলী সংজ্ঞায়িত করার অনুমতি দেয়।

ছায়া DOM স্টাইলিং একটি বিশাল বিষয়! আপনি যদি এটি সম্পর্কে আরও জানতে চান তবে আমি আমার অন্যান্য নিবন্ধগুলির কয়েকটি সুপারিশ করছি:

পলিমার ডকুমেন্টেশনে " স্টাইলিং এলিমেন্টের জন্য একটি নির্দেশিকা "।
" শ্যাডো ডম 201: CSS এবং স্টাইলিং " এখানে।

FOUC প্রতিরোধ ব্যবহার করে :অমীমাংসিত

FOUC প্রশমিত করার জন্য, কাস্টম উপাদানগুলি একটি নতুন CSS ছদ্ম ক্লাস বের করে, :unresolved । অমীমাংসিত উপাদানগুলিকে লক্ষ্য করার জন্য এটি ব্যবহার করুন, ঠিক সেই বিন্দু পর্যন্ত যেখানে ব্রাউজার আপনার createdCallback() ( লাইফসাইকেল পদ্ধতিগুলি দেখুন) আহ্বান করে। একবার এটি ঘটলে, উপাদানটি আর একটি অমীমাংসিত উপাদান থাকে না। আপগ্রেড প্রক্রিয়া সম্পূর্ণ হয়েছে এবং উপাদানটি তার সংজ্ঞায় রূপান্তরিত হয়েছে।

দ্রষ্টব্য: CSS :unresolved নেটিভভাবে Chrome 29-এ সমর্থিত।

উদাহরণ : "x-foo" ট্যাগগুলি নিবন্ধিত হলে ফেইড করুন:

<style>
  x-foo {
    opacity: 1;
    transition: opacity 300ms;
  }
  x-foo:unresolved {
    opacity: 0;
  }
</style>

মনে রাখবেন যে :unresolved শুধুমাত্র অমীমাংসিত উপাদানগুলির ক্ষেত্রে প্রযোজ্য, HTMLUnknownElement থেকে উত্তরাধিকারসূত্রে পাওয়া উপাদানগুলির ক্ষেত্রে নয় (দেখুন কীভাবে উপাদানগুলি আপগ্রেড করা হয় )৷

<style>
  /* apply a dashed border to all unresolved elements */
  :unresolved {
    border: 1px dashed red;
    display: inline-block;
  }
  /* x-panel's that are unresolved are red */
  x-panel:unresolved {
    color: red;
  }
  /* once the definition of x-panel is registered, it becomes green */
  x-panel {
    color: green;
    display: block;
    padding: 5px;
    display: block;
  }
</style>

<panel>
    I'm black because :unresolved doesn't apply to "panel".
    It's not a valid custom element name.
</panel>

<x-panel>I'm red because I match x-panel:unresolved.</x-panel>

ইতিহাস এবং ব্রাউজার সমর্থন

বৈশিষ্ট্য সনাক্তকরণ

বৈশিষ্ট্য সনাক্তকরণ হল document.registerElement() বিদ্যমান কিনা তা পরীক্ষা করার বিষয়:

function supportsCustomElements() {
    return 'registerElement' in document;
}

if (supportsCustomElements()) {
    // Good to go!
} else {
    // Use other libraries to create components.
}

ব্রাউজার সমর্থন

document.registerElement() প্রথমে Chrome 27 এবং Firefox ~23-এ একটি পতাকার পিছনে অবতরণ শুরু করে। যাইহোক, তারপর থেকে স্পেসিফিকেশন বেশ কিছুটা বিকশিত হয়েছে। ক্রোম 31ই প্রথম আপডেটেড স্পেকের জন্য সত্যিকারের সমর্থন পেয়েছে।

দ্রষ্টব্য: কাস্টম উপাদানগুলি Chrome 31-এ "পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য" এর অধীনে about:flags সক্ষম করা যেতে পারে৷

ব্রাউজার সমর্থন নাক্ষত্রিক না হওয়া পর্যন্ত, একটি পলিফিল আছে যা Google এর পলিমার এবং মজিলার এক্স-ট্যাগ দ্বারা ব্যবহৃত হয়।

HTMLElementElement এর কি হয়েছে?

যারা প্রমিতকরণের কাজ অনুসরণ করেছেন তাদের জন্য, আপনি জানেন যে একবার <element> ছিল। এটা মৌমাছি হাঁটু ছিল. আপনি ঘোষণামূলকভাবে নতুন উপাদান নিবন্ধন করতে এটি ব্যবহার করতে পারেন:

<element name="my-element">
    ...
</element>

দুর্ভাগ্যবশত, আপগ্রেড প্রক্রিয়া , কর্নার কেস এবং আর্মাগেডন-এর মতো পরিস্থিতির সাথে এটি সব কাজ করার জন্য অনেক সময় সমস্যা ছিল। <element> তাক লাগানো ছিল. অগাস্ট 2013-এ, দিমিত্রি গ্লাজকভ সর্বজনীন-ওয়েবঅ্যাপগুলিতে পোস্ট করেছেন এবং অন্তত আপাতত এর অপসারণের ঘোষণা দিয়েছেন।

এটা লক্ষণীয় যে পলিমার <polymer-element> এর সাথে উপাদান নিবন্ধনের একটি ঘোষণামূলক ফর্ম প্রয়োগ করে। কিভাবে? এটি document.registerElement('polymer-element') এবং আমি একটি টেমপ্লেট থেকে উপাদান তৈরিতে বর্ণিত কৌশলগুলি ব্যবহার করে।

উপসংহার

কাস্টম উপাদানগুলি আমাদেরকে HTML এর শব্দভাণ্ডার প্রসারিত করতে, এটিকে নতুন কৌশল শেখাতে এবং ওয়েব প্ল্যাটফর্মের ওয়ার্মহোলের মধ্য দিয়ে যেতে টুল দেয়৷ শ্যাডো ডম এবং <template> এর মতো অন্যান্য নতুন প্ল্যাটফর্মের সাথে এগুলিকে একত্রিত করুন, এবং আমরা ওয়েব কম্পোনেন্টের ছবি উপলব্ধি করতে শুরু করি। মার্কআপ আবার সেক্সি হতে পারে!

আপনি যদি ওয়েব উপাদানগুলির সাথে শুরু করতে আগ্রহী হন, আমি পলিমার চেক আউট করার পরামর্শ দিই। এটা আপনাকে যেতে পেতে যথেষ্ট বেশী আছে.