Missing hint for webcomponent prop for LuigiContainer (#3806)

SAP · Jul 8, 2024 · 061b9fe · 061b9fe
1 parent 1cc7493
commit 061b9fe
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/container/typings/LuigiContainer.svelte.d.ts b/container/typings/LuigiContainer.svelte.d.ts
@@ -39,6 +39,18 @@ export default class LuigiContainer extends HTMLElement {
    * @param {boolean} WebComponentSettings.selfRegistered: if it is true, the web component bundle will be added via script tag.
    * @param {string} WebComponentSettings.tagName: tag name where web component is added to DOM.
    * @param {string} string must be a stringified boolean or JSON object from type `WebComponentSettings`.
+   * 
+   * </br></br>
+   * <blockquote class="warning">
+   * <p>
+   * <strong>Note:</strong> If you have to use the mechanism of `selfRegistered`, we recommend using the following code in your web component:
+   * </p>
+   * </blockquote>
+   * <pre><code>
+   * window.Luigi._registerWebcomponent(new URL(document.currentScript?.getAttribute('src'), location), <YOUR_WEBCOMPONENT_CLASS>);
+   * </code></pre>
+   * The advantage of this line of code is: you don't have to specify a tag name, thus avoiding the duplication of self-defined tag names.
+   * </br>
    * @since 1.0.0
    */
   webcomponent: boolean | WebComponentSettings | string;

diff --git a/docs/luigi-container-api.md b/docs/luigi-container-api.md
@@ -75,7 +75,16 @@ Type: ([boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Glo
     -   `WebComponentSettings.type` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** : string, like module.
     -   `WebComponentSettings.selfRegistered` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** : if it is true, the web component bundle will be added via script tag.
     -   `WebComponentSettings.tagName` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** : tag name where web component is added to DOM.
--   `string` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** must be a stringified boolean or JSON object from type `WebComponentSettings`.
+-   `string` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** must be a stringified boolean or JSON object from type `WebComponentSettings`.</br></br><blockquote class="warning">
+    <p>
+    <strong>Note:</strong> If you have to use the mechanism of `selfRegistered`, we recommend using the following code in your web component:
+    </p>
+    </blockquote>
+    <pre><code>
+    window.Luigi._registerWebcomponent(new URL(document.currentScript?.getAttribute('src'), location), <YOUR_WEBCOMPONENT_CLASS>);
+    </code></pre>
+    The advantage of this line of code is: you don't have to specify a tag name, thus avoiding the duplication of self-defined tag names.
+    </br>
 
 **Meta**