Add webcomponent/shadowdom support

[jogibear9988]

Check for duplicates

• I have searched for similar issues before opening a new one.

Problem

At the moment blockly is not usable in webcomponents, this issue should track work to support them

Request

Add support for webcomponents

• Add a sample wich uses blockly in webcomponents
• Add an API to include the styles in shadowDom
• Fix issues with Tooltips shown at the wrong position/Dom Node
• Fix issue with Text inputs shown at the wrong position dom node
• Styles for Poppuout nodes (like tooltip etc), need to be seperated from the others. Cause the Tooltips for example could be placed in normal dom, and Blockly inside of shadow dom

Alternatives considered

No response

Additional context

No response

[jogibear9988]

I'll try to work on those open points for WC support

[jogibear9988]

refs issue: #1114

[jogibear9988]

Blockly.setParentContainer could be used for setting the Parent for Blockly, but this works only once, and with webcomponents you could have multiple blockly components on the page.
So the parentContainer needs to be stored per workspace

But the tooltip could also be shown outside of shadow dom (wich maybe often is also preferable cause of maybe cliping of the tooltip inside the shadowroot), but at first, the position calculation needs to be fixed

[jogibear9988]

Question:

I'd like to work on official webcomponent support. But there will be refactorings needed, cause you could have multiple blockly instance with different containers for example for tooltips, ....)

Is this something wich will be accepted later? What are the opinions about this?

Maybe look at my draft with already some changes : #7718

[BeksOmega]

Hello! I'm going to close this in favor of #1114

Will repost your question on the other thread.