Update ru/guide/v11/web-components.md

Author: dragomano

content/ru/guide/v11/web-components.md

@@ -5,12 +5,9 @@ description: Как использовать веб-компоненты с Prea
 
 # Веб-компоненты
 
-Малый размер Preact и его ориентированность на стандарты делают его отличным выбором для создания веб-компонентов.
+Веб-компоненты — это набор различных технологий, которые позволяют создавать переиспользуемые, инкапсулированные пользовательские HTML-элементы, полностью независимые от фреймворков. Примерами веб-компонентов являются элементы вроде `<material-card>` или `<tab-bar>`.
 
-Веб-компоненты — это набор стандартов, которые позволяют создавать новые типы HTML-элементов — пользовательские элементы, такие как `<material-card>` или `<tab-bar>`.
-Preact [полностью поддерживает эти стандарты](https://custom-elements-everywhere.com/#preact), позволяя бесшовное использование жизненного цикла пользовательских элементов, свойств и событий.
-
-Preact предназначен для рендеринга как полных приложений, так и отдельных частей страницы, что делает его естественным выбором для создания веб-компонентов. Многие компании используют его для создания систем компонентов или дизайна, которые затем упаковываются в набор веб-компонентов, обеспечивая повторное использование в нескольких проектах и в других фреймворках.
+Как платформенный примитив, Preact [полностью поддерживает веб-компоненты](https://custom-elements-everywhere.com/#preact), позволяя без проблем использовать жизненные циклы пользовательских элементов, свойства и события в ваших Preact-приложениях.
 
 Preact и веб-компоненты дополняют друг друга: веб-компоненты предоставляют набор низкоуровневых примитивов для расширения браузера, а Preact предоставляет высокоуровневую модель компонентов, которая может опираться на эти примитивы.
 
@@ -56,7 +53,7 @@ function Foo() {
 }
 ```
 
-> **Примечание:** Preact не делает предположений относительно схем именования и не будет пытаться преобразовывать имена, в JSX или иным образом, в свойства DOM. Если пользовательский элемент имеет имя свойства `someProperty`, то его нужно устанавливать с точно таким же регистром и написанием (`someProperty=...`). Использование `someproperty=...` или `some-property=...` не сработает.
+> **Примечание:** Preact не делает никаких предположений относительно схем именования и не пытается принудительно приводить имена, в JSX или где-либо ещё, к свойствам DOM. Если у пользовательского элемента есть свойство с именем `someProperty`, то его нужно устанавливать именно с такой же капитализацией и написанием (`someProperty=...`). `someproperty=...` или `some-property=...` работать не будут.
 
 При рендеринге статического HTML с использованием `preact-render-to-string` («SSR») сложные значения свойств, такие как объект выше, не сериализуются автоматически. Они применяются после гидратации статического HTML на клиенте.
 
@@ -91,108 +88,4 @@ Preact нормализует регистр стандартных встрое
 
 // Исправлено: прослушивается событие «tabchange» (строчные буквы).
 <tab-bar ontabchange={() => console.log('смена вкладки')} />
-```
-
-## Создание веб-компонента
-
-Любой компонент Preact может быть превращен в веб-компонент с помощью [preact-custom-element](https://github.com/preactjs/preact-custom-element), очень тонкой обёртки, которая соответствует спецификации Custom Elements v1.
-
-```jsx
-import register from 'preact-custom-element';
-
-const Greeting = ({ name = 'World' }) => <p>Привет, {name}!</p>;
-
-register(Greeting, 'x-greeting', ['name'], { shadow: false });
-//          ^            ^           ^             ^
-//          |      HTML-тег       |       использовать shadow-dom
-//   Определение компонента      Отслеживаемые атрибуты
-```
-
-> Примечание: Согласно [Спецификации Пользовательских элементов](http://w3c.github.io/webcomponents/spec/custom/#prod-potentialcustomelementname), имя тега должно содержать дефис (`-`).
-
-Используйте новое имя тега в HTML, ключи атрибутов и значения будут переданы как пропсы:
-
-```html
-<x-greeting name="Вася Пупкин"></x-greeting>
-```
-
-Вывод:
-
-```html
-<p>Привет, Вася Пупкин!</p>
-```
-
-### Отслеживаемые атрибуты
-
-Веб-компоненты требуют явного перечисления имен атрибутов, которые вы хотите отслеживать, чтобы реагировать на изменения их значений. Они могут быть указаны через третий параметр, передаваемый функции `register()`:
-
-```jsx
-// Прослушиваем изменения атрибута `name`
-register(Greeting, 'x-greeting', ['name']);
-```
-
-Если вы опустите третий параметр для `register()`, список атрибутов для отслеживания может быть указан с использованием статического свойства `observedAttributes` на компоненте. Это также работает для имени Пользовательского элемента, которое может быть указано с использованием статического свойства `tagName`:
-
-```jsx
-import register from 'preact-custom-element';
-
-// <x-greeting name="Bo"></x-greeting>
-class Greeting extends Component {
-	// Регистрируем как <x-greeting>:
-	static tagName = 'x-greeting';
-
-	// Отслеживаем эти атрибуты:
-	static observedAttributes = ['name'];
-
-	render({ name }) {
-		return <p>Привет, {name}!</p>;
-	}
-}
-register(Greeting);
-```
-
-Если `observedAttributes` не указаны, они будут выведены из ключей `propTypes`, если присутствуют на компоненте:
-
-```jsx
-// Другой вариант: используйте PropTypes:
-function FullName({ first, last }) {
-	return (
-		<span>
-			{first} {last}
-		</span>
-	);
-}
-
-FullName.propTypes = {
-	first: Object, // вы можете использовать PropTypes, или это
-	last: Object // трюк для определения не-типизированных пропсов.
-};
-
-register(FullName, 'full-name');
-```
-
-### Передача слотов как пропсов
-
-Функция `register()` имеет четвертый параметр для передачи опций; в настоящее время поддерживается только опция `shadow`, которая прикрепляет дерево shadow DOM к указанному элементу. При включении это позволяет использовать именованные элементы `<slot>` для пересылки дочерних элементов пользовательского элемента к определённым местам в дереве shadow.
-
-```jsx
-function TextSection({ heading, content }) {
-	return (
-		<div>
-			<h1>{heading}</h1>
-			<p>{content}</p>
-		</div>
-	);
-}
-
-register(TextSection, 'text-section', [], { shadow: true });
-```
-
-Использование:
-
-```html
-<text-section>
-	<span slot="heading">Приятный заголовок</span>
-	<span slot="content">Шикарный контент</span>
-</text-section>
-```
+```