Въпреки че са отхвърлени от 2014 г., Custom Elements V0 са най-разпространената история в реалния свят, която можете да разкажете.

Използван ежедневно в производство от проекти като A-Frame или Google AMP, Custom Elements V0 API се доставя само в Google Chrome и базирани на Chromium браузъри.

Ако сте в Chrome, въведете следното в конзолата и вижте, че собствената функция е регистрирана: document.registerElement

Защо това все още е там?

Като единственият браузър с вградена поддръжка на V0 има няколко предимства:

  • всички проекти, които вече са доставени с помощта на V0, когато е бил препоръчан, са по-бързи в Chrome и базирани на Chromium браузъри
  • всички проекти, които са базирани на Custom Elements вградени разширения, функция, която все още се обсъжда във V1, работи там без проблеми

Полифилът работи, миграцията може да не!

Основният проблем, който все още не е универсално разрешен за Custom Elements V1 API, е транспилиран код, който е просто повреден, когато става въпрос за вградени елементи.

Моят polyfill има предупреждения, webcomponents.js има заобикаляне, настоях за поправка на Babel, която не се приземява в ядрото, и историята на TL;DR е, че ако насочвате персонализирани елементи за всеки браузър, несъвместим с ES2015+, той ще се провали, освен ако не се вземат странни предпазни мерки.

От друга страна, моят V0 polyfill, използван от Google AMP и A-Frame, никога не е разочаровал нито един браузър. Това е отзивите им преди 3 дни:

Той ни служи добре, без грешки вече повече от година. ако не е счупено, не го поправяйте. Благодаря ви за това.

На всичкото отгоре, списъкът с поддържани браузъри превъзхожда всяка алтернатива: от IE8 и Android 2, iOS 5.1, Windows Phone 7, BBOS 7, до разбира се всеки съвременен браузър.

Все пак всички са наказани

Проблемът с моя polyfill е, че той въвежда V0 във всеки браузър, с единственото изключение на Chrome, който има собствена реализация, и след това той polyfills Custom Elements V1 върху V0, за да спазва възможно най-много стандартите, включително вградените разширения, сила -поправено на Safari и Webkit.

Удивително е колко много е направено и работи добре върху V0, но въпреки че всички вярват, че използват стандарти, техните браузъри най-вероятно са били заблудени да използват смъртоносен API като V0.

Пренасяне на V0 до V1 във всеки браузър

Какво ще стане, ако вместо това взема кода само на V0, който подхранва моя тестван в битка полифил, и използвам браузъри, поддържащи V1, за да възпроизведа по-простия API на V0?

  • няма повече проблеми с класовете, V0 API беше напълно съвместим с ES5
  • няма повече V1 предупреждения, проблеми, поддръжка на polyfill, по-малко код за поддръжка и по-лек polyfill, за да ги насочите към всички
  • вместо да закърпвам всеки браузър, сега поправям само Edge и Firefox, докато не излязат V1, и всеки друг браузър, който никога няма да види светлината на V1
  • когато Chrome изостави V0, той ще използва своя V1, за да продължи да работи според очакванията

Единственото ограничение, което реших да наложа на този polyfill, е представено от вградени разширения, които не са възможни във V1, следователно не е мъдър модел за използване за дефиниране на персонализирани елементи, или чрез V0 (бъдещо враждебно, ако разширите вградените елементи) или V1 (все още няма споразумение за това как вградените ще бъдат разширени, но със сигурност не чрез атрибута is).

Резултатът е библиотека

Това е 100% базирано на същите тестове и код, използвани от моя първоначален V0 polyfill, но тежи по-малко от 3KB и осигурява смъртоносен API, без да причинява несъвместимост с бъдещето на персонализираните елементи, и ще работи като родния V1, след като браузърите доставят текуща спецификация.

Името на библиотеката еce-v0(знам, можех да се занимавам повече с името) и в няколко байта дефинирайте надеждна база, която всеки може да използва за създаване на персонализирани елементи. База, в която всички печелят, не само браузърите Chrome.

... но V0 API все още е грозен?

Съгласен съм с вас, поради което има малък модул, част, наречена Component, която ви позволява да дефинирате потребителски елементи по по-„елегантен“ начин.

виждаш ли Без super(...) извиквания, код, лесен за транспилиране и надежден след транспилиране, за изходен код, съвместим по подразбиране с всеки браузър, както беше за оригиналния polyfill.

Надявам се, че някои ще използват V0, както правят A-Frame и момчетата от Google, така че след като всеки браузър стане способен на V1, мога да направя основна актуализация на библиотеката ce-v0 и да я направя по-малко от 1KB и готов за мигриране.

Благодаря за четенето и евентуални бъдещи тестове с това.