Document dynamic prop labels in website docs

Add "Dynamic attribute names" section to elements.mdx and a brief
mention with link in introduction.mdx. Includes translations for
ja, zh-Hans, and zh-Hant locales.

Author: Madoshakalaka

website/docs/concepts/html/elements.mdx

@@ -60,6 +60,59 @@ html! {
 };
 ```
 
+## Dynamic attribute names
+
+Similar to dynamic tag names, attribute names can also be determined at runtime. This is useful for
+libraries like HTMX that use attributes with colons (e.g. `hx-on:click`), or any situation where
+the attribute name is not known at compile time.
+
+There are two syntaxes for dynamic attribute names: string literals and expressions.
+
+### String literal attribute names
+
+Use a string literal directly as the attribute name:
+
+```rust
+use yew::prelude::*;
+
+html! {
+    <div "hx-on:click"="alert('Clicked!')" />
+};
+```
+
+This also works with braced values:
+
+```rust
+use yew::prelude::*;
+
+let handler = "alert('Clicked!')";
+
+html! {
+    <div "hx-on:click"={handler} />
+};
+```
+
+### Expression attribute names
+
+Wrap any expression in braces to compute the attribute name dynamically:
+
+```rust
+use yew::prelude::*;
+
+let attr_name = format!("hx-on:{}", "click");
+
+html! {
+    <div { attr_name }={ "alert('Clicked!')" } />
+};
+```
+
+The expression must evaluate to a type that implements `Into<AttrValue>` (e.g. `String`, `&str`, `AttrValue`).
+
+:::note
+Dynamic attribute names are only supported on HTML elements. Component properties require
+static Rust identifiers. See [Component Properties](../function-components/properties.mdx).
+:::
+
 ## Boolean Attributes
 
 Some content attributes (e.g checked, hidden, required) are called boolean attributes. In Yew,

website/docs/concepts/html/introduction.mdx

@@ -184,6 +184,20 @@ and thus must be enclosed in curly-braces `{-6}`
 
 :::
 
+Attribute names can also be set dynamically using string literals or expressions. This is useful for
+attributes that are not valid Rust identifiers, such as `hx-on:click`:
+
+```rust
+use yew::prelude::*;
+
+html! { <div "hx-on:click"="alert('Clicked!')" /> };
+html! { <div { String::from("hx-on:click") }={ "alert('Clicked!')" } /> };
+```
+
+:::info
+Read more at [Dynamic attribute names](./html/elements#dynamic-attribute-names)
+:::
+
 :::note Component properties
 Component properties are passed as Rust objects and are different from the element attributes/properties described here.
 Read more about them at [Component Properties](../function-components/properties.mdx)

website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/elements.mdx

@@ -55,6 +55,56 @@ html! {
 };
 ```
 
+## 動的な属性名
+
+動的なタグ名と同様に、属性名も実行時に決定できます。これは HTMX のようなコロンを含む属性（例: `hx-on:click`）を使用するライブラリや、属性名がコンパイル時に不明な場合に便利です。
+
+動的な属性名には、文字列リテラルと式の 2 つの構文があります。
+
+### 文字列リテラルの属性名
+
+文字列リテラルを属性名として直接使用します：
+
+```rust
+use yew::prelude::*;
+
+html! {
+    <div "hx-on:click"="alert('Clicked!')" />
+};
+```
+
+中括弧で囲んだ値でも使用できます：
+
+```rust
+use yew::prelude::*;
+
+let handler = "alert('Clicked!')";
+
+html! {
+    <div "hx-on:click"={handler} />
+};
+```
+
+### 式の属性名
+
+任意の式を中括弧で囲んで、属性名を動的に計算します：
+
+```rust
+use yew::prelude::*;
+
+let attr_name = format!("hx-on:{}", "click");
+
+html! {
+    <div { attr_name }={ "alert('Clicked!')" } />
+};
+```
+
+式は `Into<AttrValue>` を実装する型（例: `String`、`&str`、`AttrValue`）に評価される必要があります。
+
+:::note
+動的な属性名は HTML 要素でのみサポートされています。コンポーネントのプロパティには静的な Rust 識別子が必要です。[コンポーネントプロパティ](../function-components/properties.mdx)を参照してください。
+:::
+
 ## 論理値属性
 
 いくつかのコンテンツ属性（例えば、checked、hidden、required）は論理値属性と呼ばれます。Yew では、論理値属性はブール値に設定する必要があります：

website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/introduction.mdx

@@ -172,6 +172,19 @@ html! { <my-element ~property="abc" /> };
 
 :::
 
+属性名は文字列リテラルや式を使用して動的に設定することもできます。これは `hx-on:click` のような有効な Rust 識別子ではない属性に便利です：
+
+```rust
+use yew::prelude::*;
+
+html! { <div "hx-on:click"="alert('Clicked!')" /> };
+html! { <div { String::from("hx-on:click") }={ "alert('Clicked!')" } /> };
+```
+
+:::info
+詳細は[動的な属性名](./html/elements#dynamic-attribute-names)を参照してください。
+:::
+
 :::note コンポーネント属性
 コンポーネント属性は Rust オブジェクトとして渡され、ここで説明されている要素のパラメータ (Attributes) / 属性 (Properties) とは異なります。
 [コンポーネント属性](../function-components/properties.mdx)で詳細を確認してください。

website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/elements.mdx

@@ -55,6 +55,56 @@ html! {
 };
 ```
 
+## 动态属性名
+
+与动态标签名类似，属性名也可以在运行时确定。这对于使用包含冒号的属性（例如 `hx-on:click`）的 HTMX 等库，或属性名在编译时未知的任何情况都很有用。
+
+动态属性名有两种语法：字符串字面量和表达式。
+
+### 字符串字面量属性名
+
+直接使用字符串字面量作为属性名：
+
+```rust
+use yew::prelude::*;
+
+html! {
+    <div "hx-on:click"="alert('Clicked!')" />
+};
+```
+
+也可以使用大括号包裹的值：
+
+```rust
+use yew::prelude::*;
+
+let handler = "alert('Clicked!')";
+
+html! {
+    <div "hx-on:click"={handler} />
+};
+```
+
+### 表达式属性名
+
+将任意表达式用大括号包裹来动态计算属性名：
+
+```rust
+use yew::prelude::*;
+
+let attr_name = format!("hx-on:{}", "click");
+
+html! {
+    <div { attr_name }={ "alert('Clicked!')" } />
+};
+```
+
+表达式必须计算为实现了 `Into<AttrValue>` 的类型（例如 `String`、`&str`、`AttrValue`）。
+
+:::note
+动态属性名仅支持 HTML 元素。组件属性需要静态的 Rust 标识符。请参阅[组件属性](../function-components/properties.mdx)。
+:::
+
 ## 逻辑值属性
 
 一些内容属性（例如 checked、hidden、required）被称为逻辑值属性。在 Yew 中，逻辑值属性需要设置为布尔值：

website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/introduction.mdx

@@ -172,6 +172,19 @@ html! { <my-element ~property="abc" /> };
 
 :::
 
+属性名也可以使用字符串字面量或表达式动态设置。这对于不是有效 Rust 标识符的属性（如 `hx-on:click`）很有用：
+
+```rust
+use yew::prelude::*;
+
+html! { <div "hx-on:click"="alert('Clicked!')" /> };
+html! { <div { String::from("hx-on:click") }={ "alert('Clicked!')" } /> };
+```
+
+:::info
+详情请参阅[动态属性名](./html/elements#dynamic-attribute-names)
+:::
+
 :::note 组件属性
 组件属性作为 Rust 对象传递，与此处描述的元素参数 (Attributes) / 属性 (Properties) 不同。
 在[组件属性](../function-components/properties.mdx)中了解更多信息。

website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/elements.mdx

@@ -55,6 +55,56 @@ html! {
 };
 ```
 
+## 動態屬性名
+
+與動態標籤名類似，屬性名也可以在執行時確定。這對於使用包含冒號的屬性（例如 `hx-on:click`）的 HTMX 等函式庫，或屬性名在編譯時未知的任何情況都很有用。
+
+動態屬性名有兩種語法：字串字面量和表達式。
+
+### 字串字面量屬性名
+
+直接使用字串字面量作為屬性名：
+
+```rust
+use yew::prelude::*;
+
+html! {
+    <div "hx-on:click"="alert('Clicked!')" />
+};
+```
+
+也可以使用大括號包裹的值：
+
+```rust
+use yew::prelude::*;
+
+let handler = "alert('Clicked!')";
+
+html! {
+    <div "hx-on:click"={handler} />
+};
+```
+
+### 表達式屬性名
+
+將任意表達式用大括號包裹來動態計算屬性名：
+
+```rust
+use yew::prelude::*;
+
+let attr_name = format!("hx-on:{}", "click");
+
+html! {
+    <div { attr_name }={ "alert('Clicked!')" } />
+};
+```
+
+表達式必須計算為實現了 `Into<AttrValue>` 的型別（例如 `String`、`&str`、`AttrValue`）。
+
+:::note
+動態屬性名僅支援 HTML 元素。元件屬性需要靜態的 Rust 識別符號。請參閱[元件屬性](../function-components/properties.mdx)。
+:::
+
 ## 邏輯值屬性
 
 一些內容屬性（例如 checked、hidden、required）被稱為邏輯值屬性。在 Yew 中，邏輯值屬性需要設定為布林值：

website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/introduction.mdx

@@ -172,6 +172,19 @@ html! { <my-element ~property="abc" /> };
 
 :::
 
+屬性名也可以使用字串字面量或表達式動態設定。這對於不是有效 Rust 識別符號的屬性（如 `hx-on:click`）很有用：
+
+```rust
+use yew::prelude::*;
+
+html! { <div "hx-on:click"="alert('Clicked!')" /> };
+html! { <div { String::from("hx-on:click") }={ "alert('Clicked!')" } /> };
+```
+
+:::info
+詳情請參閱[動態屬性名](./html/elements#dynamic-attribute-names)
+:::
+
 :::note 元件屬性
 元件屬性以 Rust 物件傳遞，與此處所述的元素參數 (Attributes) / 屬性 (Properties) 不同。
 在[元件屬性](../function-components/properties.mdx)中了解更多。