Support injecting Blockly into shadowDom

[bamartin-ua]

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?

[rachel-fenichel]

Here's an old forum discussion from people trying to do the same thing.

[bamartin-ua]

@rachel-fenichel it looks like the consensus they came to was "it's impossible just put it in an iframe" which doesn't sound like much of a solution.

[rachel-fenichel]

I linked to the forum post because they discussed specific things that broke when you put Blockly in a shadow DOM.

First things first though - I've discovered the rendering issue is almost certainly due to Blockly inserting its CSS into the document head, where it has no effect on the contents of a shadowroot.

While trying to debug my attempt to fix that I've also discovered I can't HTML Import 'blockly_uncompressed.js' as it has a trio of 'document.write' commands at the end which don't work because HTML Imports are async (well this is optional with native support but polymer's polyfill uses xhr anyway). Even if these didn't error they still wouldn't work with blockly in a shadowroot.

Strangely I don't see this problem with the compressed code - are these statements optimised out by Closure I wonder? In which case how does Blockly get initialised?
(The answer is yes, using compressed Blockly means it doesn't use document.write.)

and

The biggest stumbling block has been trying to get categories to work - unfortunately the Closure TreeControl isn't expecting to be used within a shadowRoot, so I've had to put in a bit of a hack with a DomHelper to work around the limitations. This mostly works, the only thing that doesn't is <hr> separators - I haven't managed to track down why that is yet.

[Quincy515]

can you help me? I don't know how to fix my code.
thank you

import React from 'react'
import Blockly from 'node-blockly'
const toolbox = `
         <xml>
           <block type="controls_if"></block>
           <block type="controls_whileUntil"></block>
         </xml>` 
class BlocklyDiv extends React.Component {
    componentDidMount() {
        var workspace = Blockly.inject(this.blocklyDiv,{toolbox: toolbox});
    }
    render() {
        return (
            <div>
                <h2>BlocklyDiv</h2>
                <div id="blocklyContainer">
                    <div id="blocklyDiv" ref={ref => this.blocklyDiv = ref} ></div>
                </div>
            </div>
        )
    }
}
export default BlocklyDiv

[BusbyActual]

I'm experiencing this issue in angularJS as well.

[arunsoman]

Same issue

	Blockly.inject	@	blockly_compressed.js:1645
	(anonymous)	@	VM663:1
	connectedCallback	@	blocklyBlock.html:31
	(anonymous)	@	blocklyBlock.html:7

Code below

window.customElements.define('blockly-block' ,class extends HTMLElement{
constructor(){
super();
const template = document.createElement('template');
template.innerHTML=<div id="blocklyDiv" style="position: absolute"></div> <xml id="toolbox" style="display: none"> <block type="controls_if"></block> <block type="logic_compare"></block> <block type="controls_repeat_ext"></block> <block type="math_number"> <field name="NUM">123</field> </block> <block type="math_arithmetic"></block> <block type="text"></block> <block type="text_print"></block> </xml>;

this.attachShadow({mode: 'open'});
this.shadowRoot.appendChild(template.content.cloneNode(true));

}

connectedCallback(){
console.log("connected");
this.workspace = Blockly.inject(this.shadowRoot.getElementById('blocklyDiv'),{toolbox:this.shadowRoot.getElementById('toolbox')})
}
});

[0xAnon101]

any progress yet on this one ?

[abserari]

workspace = {
  const container = document.querySelector('#blockly_div');
  removeAllChildNodes(container);

  const workspace = Blockly.inject('blockly_div', {
    media: 'https://unpkg.com/blockly/media/',
    toolbox: defaultToolboxConfiguration(Blockly),
    grid: { spacing: 20, length: 3, colour: '#ccc', snap: true },
    zoom: {
      controls: true,
      wheel: true,
      startScale: 1.0,
      maxScale: 2.0,
      minScale: 1.0,
      scaleSpeed: 0.4
    },
    trashcan: true
  });

  return workspace;
}