blockly: Support injecting Blockly into shadowDom

So I’m trying to put blockly in a webcomponent, and I’m getting Uncaught Error: container is not in current document. Looking at the source code, this appears to be a deliberate line in Blockly.inject() that checks to make sure you’re not using shadow-dom.

// Verify that the container is in document.
if (!goog.dom.contains(document, container)) {
  throw 'Error: container is not in current document.';
}

what’s the reason for this? is there some principled reason we shouldn’t be using blockly in a webcomponent?

About this issue

Original URL
State: open
Created 7 years ago
Reactions: 3
Comments: 19 (1 by maintainers)

Most upvoted comments

Yeah, atm. it is workin with the dirty hacks. If there is time for discussions, I’m glad to help and discuss whats needed for webcomponents

jogibear9988 on Dec 18, 2023

I solved it atm. with a hack like this:

   const workspace = Blockly.inject(this.blocklyDiv, { toolbox: toolbox,  /* renderer: 'zelos' */ });

    let style1 = document.getElementById('blockly-renderer-style-geras-classic');
    this.shadowRoot.appendChild(style1);
    let style2 = document.getElementById('blockly-common-style');
    this.shadowRoot.appendChild(style2);

means after injecting blockly, I search the document for the styles and move them to my component

jogibear9988 on Dec 12, 2023