Support injecting Blockly into the shadowDom/Web Component

[letrthang]

I would like to suggest to have plan to support Web Component with Lit-Element.

[BeksOmega]

Hello, could you provide some more info about this issue? For example:

• What problem would this solve for you?
• How would this solve the problem?
• What are alternatives you've considered?

Once we have a bit more info, we'll be able to better prioritize this =)

Best,
Beka

[letrthang]

Hi Beka,

Basically we need to add blockly to our project which is generated by https://start.vaadin.com/welcome

My js file to load blockly is:
https://github.com/letrthang/vaadin-flow-14-starter/blob/master/frontend/views/blockly-view.js

and we got error:

And i think this issue is due to Blockly doesn't support Web component. The element blocklyDiv is put inside the Shadow DOM, so it cannot initialize properly.

Full proj repo (for simple, just try to run it in gitpod):
https://github.com/letrthang/vaadin-flow-14-starter

[BeksOmega]

Thanks for providing more info! That makes a lot of sense. I've updated the title to provide a bit more info =)

For people trying to fix this:
It looks like inject checks whether the passed div is attached to the current document, which causes the above error to be thrown. I'm not sure if this is necessary or not, since it's been there since the beginning of time.

If you are looking to fix this, you should test how it works with:

• Elements that are attached to the dom
• Elements that are not attached to the dom
• Elements that are part of a shadow dom

[letrthang]

Thanks Beka for helping to update this issue. Hope we will have new release to fix it soon.

[cpcallen]

It looks like inject checks whether the passed div is attached to the current document, which causes the above error to be thrown.

@NeilFraser: Does this check exist just to help confused programmers trying to inject Blockly into a DOM element that's not actually attached to anything, since they might otherwise wonder why doing so seems to have no effect?

Maybe the check should just be removed, or the throw replaced by a suitably-worded console.log.

[BeksOmega]

Apparently dupe of #1114