fix: chromium derived do not support custom element extending builtin…

… element
cheminfo · Jul 25, 2024 · d486cdc · d486cdc
1 parent 0b67d9c
commit d486cdc
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 12 deletions.
diff --git a/examples/web_component/demo.html b/examples/web_component/demo.html
@@ -13,13 +13,13 @@ <h1>Generic editor - Demo CanvasEditorElement (WebComponent)</h1>
       <p>Empty editor</p>
     </openchemlib-editor>
 
-    <!--    <openchemlib-editor-->
-    <!--      idcode="ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUh@"-->
-    <!--      readonly-->
-    <!--    >-->
-    <!--      <p>-->
-    <!--        Readonly editor with idcode ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUh@-->
-    <!--      </p>-->
-    <!--    </openchemlib-editor>-->
+    <openchemlib-editor
+      idcode="ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUh@"
+      readonly
+    >
+      <p>
+        Readonly editor with idcode ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUh@
+      </p>
+    </openchemlib-editor>
   </body>
 </html>
diff --git a/lib/canvas_editor/init/canvas_editor_element.js b/lib/canvas_editor/init/canvas_editor_element.js
@@ -20,7 +20,7 @@ function initCanvasEditorElement(CanvasEditor, Molecule, ReactionEncoder) {
    * <openchemlib-editor></openchemlib-editor>
    * ```
    */
-  class CanvasEditorElement extends HTMLDivElement {
+  class CanvasEditorElement extends HTMLElement {
     /** @type {{MOLECULE: 'molecule', REACTION: 'reaction'}} */
     static MODE = Object.freeze(
       Object.create({

diff --git a/lib/canvas_editor/init/index.js b/lib/canvas_editor/init/index.js
@@ -31,9 +31,7 @@ function init(OCL) {
     const constructor = customElements.get('openchemlib-editor');
     if (constructor) return constructor;
 
-    customElements.define('openchemlib-editor', CanvasEditorElement, {
-      extends: 'div',
-    });
+    customElements.define('openchemlib-editor', CanvasEditorElement);
 
     const css = new CSSStyleSheet();
     css.replaceSync(`

diff --git a/types.d.ts b/types.d.ts
@@ -3803,8 +3803,51 @@ interface CanvasEditorElementConstructor extends CustomElementConstructor {
 }
 
 /**
+ * a Webcomponent to wrap CanvasEditor
+ *
  * The class CanvasEditorElement is not exposed in OCL scope.
  * You can obtain it from `registerCustomElement`
+ *
+ * Usage:
+ *
+ * ```js
+ * import {registerCustomElement} from 'openchemlib/minimal';
+ *
+ * // register CanvasEditorElement with `openchemlib-editor` tag name
+ * const CanvasEditorElement = registerCustomElement();
+ *
+ * // CanvasEditorElementConstructor.MODE return enums of possible modes
+ *
+ * ```
+ *
+ * @example
+ *
+ * ```html
+ * Molecule
+ * <openchemlib-editor idcode="ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUh@"></openchemlib-editor>
+ *
+ * Molecule Fragment
+ * <openchemlib-editor
+ *  idcode="ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUhCyqHiCHy@leBhMEh]B\sa^kp"
+ *  fragment
+ * ></openchemlib-editor>
+ *
+ * Reaction
+ * <openchemlib-editor
+ *  idcode="gJX@@eKU@@ gGQHDHaImfh@!defH@DAIfUVjj`@"
+ *  mode="reaction"
+ * ></openchemlib-editor>
+ *
+ * Reaction Fragment
+ * <openchemlib-editor
+ *  idcode="gJX@@eKU@P gGQHDHaImfhB!defH@DAIfUVjj`B"
+ *  mode="reaction"
+ *  fragment
+ * ></openchemlib-editor>
+ *
+ * Molecule readonly
+ * <openchemlib-editor readonly idcode="ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUh@"></openchemlib-editor>
+ * ```
  */
 declare interface CanvasEditorElement extends HTMLElement {
   /**