Size: a a a

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

2020 September 28

MB

Mikhail Bashkirov in Веб-компоненты
а тьфу ты
меня ж это и триггернуло 🙂

   <mask id="clip-path">
       <rect style="fill:#fff;" width="100%" height="100%"/>
       <text x="71" y="94" dominant-baseline="middle" style="fill:#000;text-anchor:middle">
           ${ext}
       </text>
   </mask>
источник

ИЛ

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

MB

Mikhail Bashkirov in Веб-компоненты
так вот этот код “<mask id="clip-path">” не инкапсулируется с помощью Shadow DOM
источник

MB

Mikhail Bashkirov in Веб-компоненты
id="clip-path" должен быть доступен из вне
источник

MB

Mikhail Bashkirov in Веб-компоненты
у меня был такой негативный опыт работы с SVG и Shadow DOM
источник

ИЛ

Иван Лещёв in Веб-компоненты
если б не инкапсулировался, то у меня были бы одинаковые текста
источник

ИЛ

Иван Лещёв in Веб-компоненты
Mikhail Bashkirov
у меня был такой негативный опыт работы с SVG и Shadow DOM
я уверен, тогда просто было что-то не так
источник

MB

Mikhail Bashkirov in Веб-компоненты
как вариант - эту проблему исправили и теперь браузеры научились инкапсулировать SVG ID
источник

ИЛ

Иван Лещёв in Веб-компоненты
без шадов дом получаются именно одинаковые
источник

MB

Mikhail Bashkirov in Веб-компоненты
нашел issue где обсуждают подобные кейсы
https://github.com/w3c/webcomponents/issues/179
источник

SK

Serhii Kulykov in Веб-компоненты
опубликовал два новых релиза своих vanilla компонентов

https://twitter.com/serhiikulykov/status/1310624374488289281

https://twitter.com/serhiikulykov/status/1310625945020239879
источник
2020 September 30

SK

Serhii Kulykov in Веб-компоненты
вышла статья про declarative Shadow DOM

https://web.dev/declarative-shadow-dom/
источник

ИЛ

Иван Лещёв in Веб-компоненты
<host-element>
 <template shadowroot="open">
   <slot></slot>
 </template>
 <h2>Light content</h2>
</host-element>

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

SK

Serhii Kulykov in Веб-компоненты
цель такого синтаксиса - сделать возможным SSR. для каждого экземпляра компонента template дублируется
источник

ИЛ

Иван Лещёв in Веб-компоненты
Serhii Kulykov
цель такого синтаксиса - сделать возможным SSR. для каждого экземпляра компонента template дублируется
а какие задачи это решает?
источник

ИЛ

Иван Лещёв in Веб-компоненты
заполнить слоты можно без указания темплейта
источник

SK

Serhii Kulykov in Веб-компоненты
задачи - SEO и потенциально возможность раньше отдать контент
источник

SK

Serhii Kulykov in Веб-компоненты
слоты да, но в любом случае сейчас нужно вызывать attachShadow() руками
источник

ИЛ

Иван Лещёв in Веб-компоненты
для SEO как как раз надо
```
<host-element>
 <h2>Light content</h2>
</host-element>
```
источник

SK

Serhii Kulykov in Веб-компоненты
да, но так придется весь контент только в слоты складывать.
источник