docs: Alter TS JSX namespace examples & how to extend our types

content/en/guide/v10/typescript.md

@@ -216,9 +216,9 @@ When we write components like `<Input />` that wrap the HTML `<input>`, most of
 the props that can be used on the native HTML input element. To do this we can do the following:
 
 ```tsx
-import { JSX } from 'preact';
+import { HTMLInputAttributes } from 'preact';
 
-interface InputProperties extends JSX.InputHTMLAttributes<HTMLInputElement> {
+interface InputProperties extends InputHTMLAttributes<HTMLInputElement> {
 	mySpecialProp: any;
 }
 
@@ -232,10 +232,10 @@ Now when we use `Input` it will know about properties like `value`, ...
 Preact emits regular DOM events. As long as your TypeScript project includes the `dom` library (set it in `tsconfig.json`), you have access to all event types that are available in your current configuration.
 
 ```tsx
-import type { JSX } from "preact";
+import type { TargetedMouseEvent } from "preact";
 
 export class Button extends Component {
-  handleClick(event: JSX.TargetedMouseEvent<HTMLButtonElement>) {
+  handleClick(event: TargetedMouseEvent<HTMLButtonElement>) {
     alert(event.currentTarget.tagName); // Alerts BUTTON
   }
 
@@ -522,9 +522,9 @@ The only annotation needed is in the reducer function itself. The `useReducer` t
 
 ## Extending built-in JSX types
 
-You may have [custom elements](/guide/v10/web-components) that you'd like to use in JSX, or you may wish to add additional attributes to all HTML elements to work with a particular library. To do this, you will need to extend the `IntrinsicElements` or `HTMLAttributes` interfaces, respectively, so that TypeScript is aware and can provide correct type information.
+You may have [custom elements](/guide/v10/web-components) that you'd like to use in JSX, or you may wish to add additional attributes to all or some HTML elements to work with a particular library. To do this, you will need to use "Module augmentation" to extend and/or alter the types that Preact provides.
 
-### Extending `IntrinsicElements`
+### Extending `IntrinsicElements` for custom elements
 
 ```tsx
 function MyComponent() {
@@ -549,7 +549,9 @@ declare global {
 export {};
 ```
 
-### Extending `HTMLAttributes`
+### Extending `HTMLAttributes` for global custom attributes
+
+If you want to add a custom attribute to all HTML elements, you can extend the `HTMLAttributes` interface:
 
 ```tsx
 function MyComponent() {
@@ -574,3 +576,22 @@ declare global {
 // This empty export is important! It tells TS to treat this as a module
 export {};
 ```
+
+### Extending per-element interfaces for custom attributes
+
+Sometimes you may not want to add a custom attribute globally, but only to a specific element. In this case, you can extend the specific element's interface:
+
+```tsx
+// global.d.ts
+
+declare global {
+	namespace preact.JSX {
+		interface HeadingHTMLAttributes {
+			custom?: string | undefined;
+		}
+	}
+}
+
+// This empty export is important! It tells TS to treat this as a module
+export {};
+```

content/en/guide/v11/typescript.md

@@ -315,8 +315,8 @@ function App() {
 	return (
 		<AppContext.Provider
 			value={{
-				//    ~~~~~
-				// 💥 Error: theme not defined
+	 //    ~~~~~
+	 // 💥 Error: theme not defined
 				lang: 'de',
 				authenticated: true
 			}}

content/ru/guide/v10/typescript.md

@@ -210,9 +210,9 @@ class Expandable extends Component<ExpandableProps, ExpandableState> {
 Когда мы пишем компоненты, такие как `<Input />`, которые оборачивают HTML-элемент `<input>`, чаще всего мы хотим унаследовать свойства, которые могут быть использованы на нативном HTML-элементе input. Для этого мы можем сделать следующее:
 
 ```tsx
-import { JSX } from 'preact';
+import { InputHTMLAttributes } from 'preact';
 
-interface InputProperties extends JSX.InputHTMLAttributes<HTMLInputElement> {
+interface InputProperties extends InputHTMLAttributes<HTMLInputElement> {
   mySpecialProp: any
 }
 
@@ -226,10 +226,10 @@ const Input = (props: InputProperties) => <input {...props} />
 Preact генерирует регулярные события DOM. Пока ваш проект TypeScript включает библиотеку `dom` (установите её в `tsconfig.json`), у вас есть доступ ко всем типам событий, которые доступны в вашей текущей конфигурации.
 
 ```tsx
-import type { JSX } from "preact";
+import type { TargetedMouseEvent } from "preact";
 
 export class Button extends Component {
-  handleClick(event: JSX.TargetedMouseEvent<HTMLButtonElement>) {
+  handleClick(event: TargetedMouseEvent<HTMLButtonElement>) {
     alert(event.currentTarget.tagName); // Оповещение BUTTON
   }
 
@@ -563,4 +563,4 @@ declare global {
 
 // Этот пустой экспорт очень важен! Это говорит TS, что нужно рассматривать это как модуль
 export {}
-```
+```

content/zh/guide/v10/typescript.md

@@ -214,9 +214,9 @@ class Expandable extends Component<ExpandableProps, ExpandableState> {
 当我们编写像 `<Input />` 这样包装 HTML `<input>` 的组件时，大多数情况下我们希望继承可以在原生 HTML input 元素上使用的 props。为此，我们可以这样做：
 
 ```tsx
-import { JSX } from 'preact';
+import { InputHTMLAttributes } from 'preact';
 
-interface InputProperties extends JSX.InputHTMLAttributes<HTMLInputElement> {
+interface InputProperties extends InputHTMLAttributes<HTMLInputElement> {
   mySpecialProp: any
 }
 
@@ -230,10 +230,10 @@ const Input = (props: InputProperties) => <input {...props} />
 Preact 会发出常规的 DOM 事件。只要您的 TypeScript 项目包含 `dom` 库（在 `tsconfig.json` 中设置），您就可以访问当前配置中可用的所有事件类型。
 
 ```tsx
-import type { JSX } from "preact";
+import type { TargetedMouseEvent } from "preact";
 
 export class Button extends Component {
-  handleClick(event: JSX.TargetedMouseEvent<HTMLButtonElement>) {
+  handleClick(event: TargetedMouseEvent<HTMLButtonElement>) {
     alert(event.currentTarget.tagName); // 提示 BUTTON
   }
 
@@ -568,4 +568,4 @@ declare global {
 
 // 这个空导出很重要！它告诉 TS 将此视为模块
 export {}
-``` 
+```