8-web-components/7-shadow-dom-events by dandgerson · Pull Request #222 · javascript-tutorial/ru.javascript.info

dandgerson · 2019-05-31T09:24:58Z

No description provided.

dandgerson · 2019-05-31T09:26:36Z

Добрый день, предлагаю вариант перевода статьи. Хочу отметить, что статья насыщена терминами, которые, я думаю, требуют уточнения. Пожалуйста, обратите на это особое внимание при ревью. =)

Например, такие как: slotted element, я перевёл, как явный элемент, но есть ощущение, что это не совсем точно и искажает вкладываемый смысл.

8-web-components/7-shadow-dom-events/article.md

xcurveballx

Да, сложный материал. Как вариант, я предлагаю в самом начале статьи выписать термины с переводом/объяснением, о чем речь, а в статье уже использовать Shadow DOM, Flattened DOM и т.д. Это не совсем перевод будет, а скорее доработка контента. Иначе смысла не много на самом деле. Если пытаться везде по тексту использовать переведенные версии терминов, то у читателей будет каша. Лично я читал, открыв пару англоязычных статей параллельно, чтобы понять, о чем речь идёт.

8-web-components/7-shadow-dom-events/article.md

javascript-translate-bot · 2019-05-31T12:13:20Z

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

8-web-components/7-shadow-dom-events/article.md

javascript-translate-bot · 2019-05-31T19:57:37Z

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

Co-Authored-By: Alexey Pyltsyn <lex61rus@gmail.com>

dandgerson · 2019-06-01T12:06:41Z

Благодарю за правки =)

/done

xcurveballx · 2019-06-09T13:06:34Z

8-web-components/7-shadow-dom-events/article.md

 ```

-If a click happens on `"John Smith"`, for both inner and outer handlers the target is `<span slot="username">`. That's an element from the light DOM, so no retargeting.
+Если клик произойдёт на `"John Smith"`, то для обоих обработчиков -- внутреннего и внешнего -- целевым элементом будет `<span slot="username">`. Это элемент обычного ("светлого") DOM, так что подмены не происходит.


А вот кстати интересный вопрос - в этом контексте light - это светлый (как оппозиция теневому) или лёгкий (отражает идею, что в него входят только элементы внутри компонента)?

Светлый. Посмотри предыдущие переводы по терминологии мб? Там обсуждали

Плиз убери кавычки вокруг "светлый" везде.
А то теневой-то без кавычек =)

8-web-components/7-shadow-dom-events/article.md

iliakan

Спасибо! Пожалуйста, внеси изменения, ряд изменений напрямую меняет смысл, они важные.

Хорошо бы во всём разделе про Shadow DOM использовать одинаковые термины, в частности flattened -> развёрнутый.

iliakan · 2019-06-09T19:45:54Z

8-web-components/7-shadow-dom-events/article.md

+# Теневой DOM и события

-The idea behind shadow tree is to encapsulate internal implementation details of a component.
+Идея, стоящая за теневым DOM-деревом -- это инкапсуляция реализации внутренних деталей компонента.


Смысл создания теневого DOM-дерева - это инкапсуляция внутренних деталей компонента.

iliakan · 2019-06-09T19:46:34Z

8-web-components/7-shadow-dom-events/article.md

+Идея, стоящая за теневым DOM-деревом -- это инкапсуляция реализации внутренних деталей компонента.

-Let's say, a click event happens inside a shadow DOM of `<user-card>` component. But scripts in the main document have no idea about the shadow DOM internals, especially if the component comes from a 3rd-party library or so.  
+Допустим, клик произошёл внутри теневого DOM на компоненте `<user-card>`. Но скрипты основного документа ничего не знают о внутреннем устройстве теневой DOM-структуры, в особенности, если компонент из кода сторонней библиотеки или вроде того.


если компонент из кода сторонней библиотеки или вроде того -> если компонент создан сторонней библиотекой

iliakan · 2019-06-09T19:48:14Z

8-web-components/7-shadow-dom-events/article.md

+Допустим, клик произошёл внутри теневого DOM на компоненте `<user-card>`. Но скрипты основного документа ничего не знают о внутреннем устройстве теневой DOM-структуры, в особенности, если компонент из кода сторонней библиотеки или вроде того.

-So, to keep things simple, the browser *retargets* the event.
+Таким образом, чтобы не усложнять, браузер *меняет у этого события целевой элемент*.


Поэтому, чтобы не нарушать инкапсуляцию, браузер меняет у этого события целевой элемент.

iliakan · 2019-06-09T19:49:07Z

8-web-components/7-shadow-dom-events/article.md

+Таким образом, чтобы не усложнять, браузер *меняет у этого события целевой элемент*.

-**Events that happen in shadow DOM have the host element as the target, when caught outside of the component.**
+**События, которые пойманы в теневом DOM, но вне компонента, имеют в качестве целевого элемента -- элемент-хозяин.**


События, которые произошли в теневом DOM, но пойманы снаружи этого DOM, имеют элемент-хозяин в качестве целевого элемента event.target.

iliakan · 2019-06-09T19:50:14Z

8-web-components/7-shadow-dom-events/article.md

+Хорошо, что браузер подменяет целевые элементы событий. Потому что внешний документ ничего не знает о внутреннем устройстве компонента. С его (внешнего документа) точки зрения, событие происходит на `<user-card>`.

-**Retargeting does not occur if the event occurs on a slotted element, that physically lives in the light DOM.**
+**Подмена целевого элемента не происходит, если событие берёт начало на "слотовом" элементе, который фактически находится в обычном, "светлом" DOM.**


"слотовом" элементе -> элементе из слота

iliakan · 2019-06-09T20:03:16Z

8-web-components/7-shadow-dom-events/article.md

+## Итого

-Events only cross shadow DOM boundaries if their `composed` flag is set to `true`.
+Только те события пересекают границы теневого DOM, чей флаг `composed` установлен в значение `true`.


чей -> у которых ф

iliakan · 2019-06-09T20:03:36Z

8-web-components/7-shadow-dom-events/article.md

+Только те события пересекают границы теневого DOM, чей флаг `composed` установлен в значение `true`.

-Built-in events mostly have `composed: true`, as described in the relevant specifications:
+У большинства встроенных событий стоит `composed: true`, как и описано в соответствующих спецификациях:


как и описано -> это описано

iliakan · 2019-06-09T20:03:50Z

8-web-components/7-shadow-dom-events/article.md

+У некоторых встроенных событий всё же стоит `composed: false`:

- `mouseenter`, `mouseleave` (also do not bubble),
+- `mouseenter`, `mouseleave` (также не всплывают),


также -> вообще

iliakan · 2019-06-09T20:04:10Z

8-web-components/7-shadow-dom-events/article.md

+Эти события могут быть пойманы только на элементах, принадлежащих тому же DOM-дереву.

-If we dispatch a `CustomEvent`, then we should explicitly set `composed: true`.
+Если мы инициируем `CustomEvent`, то должны явно поставить флаг `composed: true`.


инициируем -> генерируем своё событие

iliakan · 2019-06-09T20:08:04Z

8-web-components/7-shadow-dom-events/article.md

+Если мы инициируем `CustomEvent`, то должны явно поставить флаг `composed: true`.

-Please note that in case of nested components, composed events bubble through all shadow DOM boundaries. So, if an event is intended only for the immediate enclosing component, we can also dispatch it on the shadow host. Then it's out of the shadow DOM already.
+Обратите внимание, что в случае вложенных компонентов, события с заданной композицией всплывают через границы всего теневого DOM. Поэтому, если событие предназначено только для непосредственного ближайшего компонента, то мы также должны инициировать это событие на элементе-хозяине. Иначе оно выйдет за пределы своего теневого DOM.


Обратите внимание, что в случае вложенных компонентов теневые DOM могут быть вложены друг в друга. События с флагом composed всплывают через границы всех теневых DOM. Поэтому, если событие предназначено только для ближайшего внешнего компонента-родителя, мы можем инициировать его на элементе-хозяине. Тогда оно будет уже вне теневого DOM компонента, но не выплывает наружу в "ещё более внешний" DOM.

javascript-translate-bot · 2019-06-09T20:08:58Z

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

xcurveballx · 2019-06-22T11:31:42Z

@dandgerson Добрый день! Есть ли у вас возможность продолжить заниматься этим PR?

xcurveballx · 2019-06-27T18:24:13Z

/done

iliakan · 2019-06-27T18:36:09Z

🚀

dandgerson added 4 commits May 30, 2019 20:44

add original

47da063

translate article

9386a0b

remove original

580a8ba

fix typos

a0fc9b6

javascript-translate-bot added the review needed Review needed, please approve or request changes label May 31, 2019

javascript-translate-bot requested a review from a team May 31, 2019 09:25

iliakan mentioned this pull request May 31, 2019

Russian Translation Progress #60

Closed

Update article.md

56f8a8d

dandgerson commented May 31, 2019

View reviewed changes

8-web-components/7-shadow-dom-events/article.md Outdated Show resolved Hide resolved

Update 8-web-components/7-shadow-dom-events/article.md

9b08583

dandgerson commented May 31, 2019

View reviewed changes

8-web-components/7-shadow-dom-events/article.md Outdated Show resolved Hide resolved

Update 8-web-components/7-shadow-dom-events/article.md

066d41f

xcurveballx requested changes May 31, 2019

View reviewed changes

javascript-translate-bot added changes requested Waiting for changes and /done from PR author and removed review needed Review needed, please approve or request changes labels May 31, 2019

ca11ado suggested changes May 31, 2019

View reviewed changes

8-web-components/7-shadow-dom-events/article.md Outdated Show resolved Hide resolved

8-web-components/7-shadow-dom-events/article.md Outdated Show resolved Hide resolved

dandgerson added 11 commits June 1, 2019 10:36

update article

efa6c89

update article

523f66f

update article

dfb6931

update article

5fee9bf

update article

474be09

update article

e1139f6

update article

02319de

update article

421b909

update article

7c78b0b

update article

535f98d

update article

13640da

dandgerson and others added 11 commits June 1, 2019 14:53

Update 8-web-components/7-shadow-dom-events/article.md

88ec08c

Co-Authored-By: Alexey Pyltsyn <lex61rus@gmail.com>

Update 8-web-components/7-shadow-dom-events/article.md

353e24b

Co-Authored-By: Alexey Pyltsyn <lex61rus@gmail.com>

Update 8-web-components/7-shadow-dom-events/article.md

0f52625

Co-Authored-By: Alexey Pyltsyn <lex61rus@gmail.com>

Update 8-web-components/7-shadow-dom-events/article.md

bf32c26

Co-Authored-By: Alexey Pyltsyn <lex61rus@gmail.com>

Update 8-web-components/7-shadow-dom-events/article.md

13ad774

Co-Authored-By: Alexey Pyltsyn <lex61rus@gmail.com>

Update 8-web-components/7-shadow-dom-events/article.md

4d927aa

Co-Authored-By: Alexey Pyltsyn <lex61rus@gmail.com>

Update 8-web-components/7-shadow-dom-events/article.md

348c163

Co-Authored-By: Alexey Pyltsyn <lex61rus@gmail.com>

Update 8-web-components/7-shadow-dom-events/article.md

4241199

Co-Authored-By: Alexey Pyltsyn <lex61rus@gmail.com>

Update 8-web-components/7-shadow-dom-events/article.md

e955d05

Co-Authored-By: Alexey Pyltsyn <lex61rus@gmail.com>

Update 8-web-components/7-shadow-dom-events/article.md

9aff772

Co-Authored-By: Alexey Pyltsyn <lex61rus@gmail.com>

Update 8-web-components/7-shadow-dom-events/article.md

91b1b2f

Co-Authored-By: Alexey Pyltsyn <lex61rus@gmail.com>

javascript-translate-bot added review needed Review needed, please approve or request changes and removed changes requested Waiting for changes and /done from PR author labels Jun 1, 2019

javascript-translate-bot requested a review from a team June 1, 2019 12:06

xcurveballx reviewed Jun 9, 2019

View reviewed changes

xcurveballx approved these changes Jun 9, 2019

View reviewed changes

javascript-translate-bot added needs +1 One more review needed and removed review needed Review needed, please approve or request changes labels Jun 9, 2019

iliakan requested changes Jun 9, 2019

View reviewed changes

javascript-translate-bot added the changes requested Waiting for changes and /done from PR author label Jun 9, 2019

xcurveballx added 2 commits June 27, 2019 20:55

правки iliakan

926785c

Подлил мастер и решил конфликт

ee1d313

xcurveballx added review needed Review needed, please approve or request changes and removed changes requested Waiting for changes and /done from PR author labels Jun 27, 2019

javascript-translate-bot merged commit 12784b0 into javascript-tutorial:master Jun 27, 2019

Conversation

dandgerson commented May 31, 2019

Uh oh!

dandgerson commented May 31, 2019

Uh oh!

Uh oh!

Uh oh!

xcurveballx left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

javascript-translate-bot commented May 31, 2019

Uh oh!

Uh oh!

Uh oh!

javascript-translate-bot commented May 31, 2019

Uh oh!

dandgerson commented Jun 1, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

iliakan left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

javascript-translate-bot commented Jun 9, 2019

Uh oh!

xcurveballx commented Jun 22, 2019

Uh oh!

xcurveballx commented Jun 27, 2019

Uh oh!

iliakan commented Jun 27, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants