DOC-3223: Added support for loading web components into iframes.

modules/ROOT/pages/8.2.0-release-notes.adoc

@@ -73,6 +73,13 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a
 
 {productname} 8.2.0 also includes the following addition<s>:
 
+=== Added support for loading web components into iframes
+// #TINY-13006
+
+Previously, there was no method to load web components into the editor iframe or preview iframes used by other plugins, which prevented these components from rendering correctly. This limitation impacted users who relied on custom web components for extended editor functionality or content visualization. In {release-version}, a new API link:https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.html.schema/#getComponentUrls[getComponentUrls] has been introduced that allows specifying a script URL for the web component within the custom element schema. This enhancement enables web components to be properly registered and rendered within the {productname} editor environment.
+
+For an example of using custom elements with block-level and inline-level components, see: xref:content-filtering.adoc#example-using-custom_elements-with-block-level-and-inline-level-components[Example using `+custom_elements+` with block-level and inline-level components].
+
 // === <TINY-vwxyz 1 changelog entry>
 // #TINY-vwxyz1
 

modules/ROOT/partials/configuration/custom_elements.adoc

@@ -19,6 +19,7 @@ tinymce.init({
 * **Custom Element Structure:** The custom_elements option and the `addCustomElements` API supports more complex structures. This structure is defined by a record where the key represents the name of the element, and the value corresponds to a detailed specification.
 * **Attributes and Inheritance:** Elements inherit attributes and children from other specified elements using the `+extends: "div"+` property in the `custom_elements` spec.
 * **Attribute and Children Specifications:** The `custom_elements` spec includes properties such as `attributes` which lists attribute names, or `children` which lists valid child element names. The `children` property includes presets like `@global`, `@blocks`, `@phrasing`, and `@flow`.
+* **Web Components Support:** Custom elements can specify a `+componentsUrl+` property to load web component scripts into the editor.
 
 HTML Element Sets: The exact element sets for each preset, depending on the schema set (html4, html5, or html5-strict), can be found in the below tables.
 
@@ -96,4 +97,29 @@ tinymce.init({
     });
   },
 });
+----
+
+=== Example using `+custom_elements+` with block-level and inline-level components.
+
+[source, js]
+----
+tinymce.init({
+  selector: "textarea",
+  custom_elements: {
+    // Block-level custom element (behaves like a div)
+    "my-custom-block": {
+      extends: "div",
+      attributes: ["@global", "data-type", "data-id"],
+      children: ["@flow"],
+      componentsUrl: "/path/to/block-component.js"
+    },
+    // Inline-level custom element (behaves like a span)
+    "my-custom-inline": {
+      extends: "span",
+      attributes: ["@global", "data-value"],
+      children: ["@phrasing"],
+      componentsUrl: "/path/to/inline-component.js"
+    }
+  }
+});
 ----