Dartess 15 янв 2018 в 11:16

Веб-компоненты: обзор и использование в продакшне

39 мин

53K

HTML * JavaScript * Веб-разработка *

Туториал

Из песочницы

+31

Комментарии 18

BigDflz 15 янв 2018 в 12:56

хороший обзор… вот только полифилы не всё могут. иногда так подгаживают, что не понятно где искать. А с этими новшествами работа просто в удовольствие, если ориентироваться только на хром. Если разработка для корпоративного использования — то можно использовать только хром, подобное многие применяют ориентируясь только на IE. Но в остальном, приходится сожалеть… Хотя б FF внедрил бы, уже легче было б. А так смотришь на эти радости и городишь велосипеды… дабы всем угодить.

Dartess 15 янв 2018 в 13:03

Custom Elements v1 по умолчанию включены в 59 FF, релиз этой версии в марте.
Shadow DOM v1 частично работает за флагом в ночной сборке (не до конца работают слоты, например), то есть прямо сейчас идёт активная разработка.
В Edge CE и SD самые популярные фичи среди пользователей wpdev.uservoice.com и обе значатся в статусе «в бэклоге». Я надеюсь, в этом году реализуют и они в полном объёме.

BigDflz 15 янв 2018 в 13:14

в FF многое работает с dom.webcomponents.enabled = true, и уже давно работает, почему не включить по умолчанию? пока актуальна 57 FF, до 59 ещё ждать…

camradee 15 янв 2018 в 13:14

Круто конечно и интересно было почитать. Но как то многовато кода и ограничений для реализации такого простого функционала. Для какой-то отдельной приблуды может и зайдет.

BigDflz 15 янв 2018 в 13:20

вот тут всё описано просто и доступно learn.javascript.ru/webcomponents-intro

camradee 15 янв 2018 в 13:26

Да, толковый сайт по js, стоит уже в закладках. Но до раздела веб-компонент пока не добрался, спасибо.

urrri 15 янв 2018 в 17:01

Тем кто интересуется, советую обратить внимание на маленькую библиотеку Slim.js (http://slimjs.com). Это более тонкая чем Полимер и быстрая обертка над Веб Компонентами, ориентированная на Javascript

Tab10id 15 янв 2018 в 21:09

Великолепный обзор, спасибо. Сам давно жду, когда же технология наконец взлетит, избавляет от стольких костылей разом...

Jaromir 16 янв 2018 в 01:42

Избавит, да не от всех. Например веб-компоненты не решают проблему автоматической связи модели с представлением (и наоборот). Отсюда Polymer, с его «не типичным для простых веб-компонентов» подходом

eugef 16 янв 2018 в 14:34

Столкнулся с такой проблемой при использовании веб-компонентов.
Допустим внутри компонента есть кнопка с классом «my-button» и вне компонента тоже есть такие кнопки. И я как владелец веб-компонента хочу, чтобы кнопка внутри моего компонента была стилизована так же. Как этого достичь?

Dartess 16 янв 2018 в 14:35

Вероятно, выделить компонент <my-button></my-button>, даже если там нет никакой логики, кроме инкапсуляции стилей.

omarty 16 янв 2018 в 14:36

Отличная статья. Спасибо большое!

inoyakaigor 16 янв 2018 в 16:01

Firefox не поддерживает и не будет поддерживать по умолчанию HTML-импорты

А чем они это объясняют?

Dartess 16 янв 2018 в 19:06

Здесь можно почитать подробнее, если честно, я не увидел там ничего фундаментального.
Здесь ещё немного про переход Polymer'а с HTML-импортов на ES6-модули.