Телеграмм чат группы webcomponents_ru страница 325

parrot.ru

Рейтинг популярных групп и каналов

В рейтинге участвует:

групп:

каналов:

Виртуальный сервер на SSD - недорого!

Аренда выделенных и виртуальных серверов (VDS/VPS), хостинг, аренда IP-адресов, администрирование, круглосуточная поддержка

qwarta.ru подробнее

Резервное копирование с проверкой на вирусы!!!

Удобный сервис создания резервных копий на любой сервер сети интернет. Отслеживайте изменения, проверяйте на вирусы. Надежно защитите свой бизнес!

go.backupland.com

Выбираете сервер? Любая конфигурация на заказ!

Аренда физических серверов любых конфигураций под любые запросы - 1С бухгалтерия, игровые сервера, нагруженные проекты, интернет-магазины!

qwarta.ru подробнее

Size: a a a

Веб-компоненты

160 membersпожаловаться на группу

2021 January 18

A

Alexandr in Веб-компоненты

Ребят, не поскажите есть ли в litElement возможность импортировать стили не таким образом
render() {
return html`
<style>
${styles}
</style>

а подключать их сразу прямым импортом?
Или это настройки вебпака просто?

источник

14:17пожаловаться #1

ИЛ

Иван Лещёв in Веб-компоненты

Alexandr

Ребят, не поскажите есть ли в litElement возможность импортировать стили не таким образом
render() {
return html`
<style>
${styles}
</style>

а подключать их сразу прямым импортом?
Или это настройки вебпака просто?

в смысле? какой должен получится формат?

источник

14:19пожаловаться #2

SK

Serhii Kulykov in Веб-компоненты

можно использовать static get styles() и шаблонный литерал css`` для стилей. но все равно лоадер для вебпака понадобится

источник

14:19пожаловаться #3

A

Alexandr in Веб-компоненты

можно использовать static get styles() и шаблонный литерал css`` для стилей. но все равно лоадер для вебпака понадобится

Спасибо, понял

источник

14:20пожаловаться #4

SK

Serhii Kulykov in Веб-компоненты

lit-css-loader поищите

источник

14:20пожаловаться #5

A

Alexandr in Веб-компоненты

lit-css-loader поищите

не я скорее имел ввиду если стили прописаны в другом файле, то подключать их просто импортом без обьявленя в рендере либо же через get Styles()

источник

14:21пожаловаться #6

ИЛ

Иван Лещёв in Веб-компоненты

нет разницы для яваскрипта жы
<style>${style}</style> ${this.template}
<style>${require('./x-icon.inline.scss')}</style> ${this.template}

источник

14:22пожаловаться #7

ИЛ

Иван Лещёв in Веб-компоненты

но лоадер я писал сам

источник

14:22пожаловаться #8

SK

Serhii Kulykov in Веб-компоненты

отличие в том, что стили, передаваемые в static get styles() в хроме используют constructable stylesheets, в остальных браузерах - сериализуются в <style>

источник

14:22пожаловаться #9

2021 January 19

SK

Serhii Kulykov in Веб-компоненты

статья о библиотеке three-elements https://hmans.co/posts/2021-01-18-three-elements/

Introducing three-elements

Web Components for Three.js 🎉 Build 3D applications using HTML tags, or with your favorite web framework!

источник

10:30пожаловаться #10

SK

Serhii Kulykov in Веб-компоненты

и минутка рекламы: мы в Vaadin сейчас ищем разработчика в мою команду. если интересно, обращайтесь 🙂

https://twitter.com/iamkulykov/status/1351445894005141504

Сергей Куликов

Мы в Vaadin ищем фронтенд-инженера в команду разработки нашей библиотеки веб-компонентов. Предстоит работать вместе со мной над миграцией на lit-element. Заинтересованы? Пишите в личку. https://t.co/QUa3CpIm8a

источник

11:27пожаловаться #11

AY

Andrey Yamanov in Веб-компоненты

статья о библиотеке three-elements https://hmans.co/posts/2021-01-18-three-elements/

Introducing three-elements

Web Components for Three.js 🎉 Build 3D applications using HTML tags, or with your favorite web framework!

Всё жду когда будет такое же, но для https://zzz.dog/ 🙂 Может сам когда-нибудь напишу.

Zdog

Round, flat, designer-friendly pseudo-3D engine for canvas and SVG

источник

11:28пожаловаться #12

АР

Алексей Родионов... in Веб-компоненты

статья о библиотеке three-elements https://hmans.co/posts/2021-01-18-three-elements/

Introducing three-elements

Web Components for Three.js 🎉 Build 3D applications using HTML tags, or with your favorite web framework!

Не очень понял, как они сделали, что это работает (я про 4 строку)?

источник

13:27пожаловаться #13

AY

Andrey Yamanov in Веб-компоненты

Алексей Родионов

Не очень понял, как они сделали, что это работает (я про 4 строку)?

eval? 🙂

источник

13:27пожаловаться #14

A

Alexandr in Веб-компоненты

Народ, допустимо ли в litElement разделять логику от разметки таким образом

function template(props) {
return html`<btn @click={()=>props.add()}">Add</btn>`;
}

class App extends LitElement {
add(){
...
}

render() {
return html`
${template({
add: this.add.bind(this)
})

}
либо же для этого лучше использовать slot?

источник

15:30пожаловаться #15

VF

Valentin Fedyakov in Веб-компоненты

slot используют что бы прокинуть элемент из light dom в shadow dom

источник

15:47пожаловаться #16

VF

Valentin Fedyakov in Веб-компоненты

в твоем случае достаточно писать все в одном компоненте

источник

15:47пожаловаться #17

SK

Serhii Kulykov in Веб-компоненты

стрелочные функции пересоздаются при каждом рендере, и .bind(this) тоже. так что возможно это не будет эффективным

источник

15:47пожаловаться #18

A

Alexandr in Веб-компоненты

стрелочные функции пересоздаются при каждом рендере, и .bind(this) тоже. так что возможно это не будет эффективным

можно забайндить в кострукторе или же есть способ лучше для разделеия логики? не нашел примеров как это сделать правильно

источник

15:49пожаловаться #19

S

Sasha in Веб-компоненты

Alexandr

Народ, допустимо ли в litElement разделять логику от разметки таким образом

function template(props) {
return html`<btn @click={()=>props.add()}">Add</btn>`;
}

class App extends LitElement {
add(){
...
}

render() {
return html`
${template({
add: this.add.bind(this)
})

}
либо же для этого лучше использовать slot?

а зачем так делать? выглядит как попытка мигрировать функциональный компонент из реакта в лит

источник

15:50пожаловаться #20