diff --git a/src/dom_components/config/config.ts b/src/dom_components/config/config.ts
index 56da8668e..e184c03a2 100644
--- a/src/dom_components/config/config.ts
+++ b/src/dom_components/config/config.ts
@@ -53,6 +53,13 @@ export interface DomComponentsConfig {
    * https://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#void-elements
    */
   voidElements?: string[];
+
+  /**
+   * Experimental: Use the frame document for DOM element creation.
+   * This option might be useful when elements require the local document context to
+   * work properly (eg. Web Components).
+   */
+  useFrameDoc?: boolean;
 }
 
 export default {
@@ -61,6 +68,7 @@ export default {
   draggableComponents: true,
   disableTextInnerChilds: false,
   processor: undefined,
+  useFrameDoc: false,
   voidElements: [
     'area',
     'base',
diff --git a/src/dom_components/view/ComponentView.ts b/src/dom_components/view/ComponentView.ts
index 5103d2057..f2b2cecb1 100644
--- a/src/dom_components/view/ComponentView.ts
+++ b/src/dom_components/view/ComponentView.ts
@@ -97,6 +97,11 @@ Component> {
     return this.opts.config.frameView;
   }
 
+  get createDoc() {
+    const doc = this.frameView?.getDoc() || document;
+    return this.opts.config?.useFrameDoc ? doc : document;
+  }
+
   __isDraggable() {
     const { model, config } = this;
     const { draggable } = model.attributes;
@@ -516,6 +521,10 @@ Component> {
     this.$el.data({ model, collection, view });
   }
 
+  _createElement(tagName: string): Node {
+    return this.createDoc.createElement(tagName);
+  }
+
   /**
    * Render children components
    * @private