FancyTree Drag/Drop Marker in Webcomponents

[jogibear9988]

Problem:

I use Fancy Tree in a Webcomponent, wich include the styles for it in it's shadowdom. So the css is not loaded into the main document.
Problem is, the drag/drop marker is always added to the body of the main page.

Maybe there should be a way, so the marker could be added to the shadow dom?

You could see a example of it here: https://node-projects.github.io/web-component-designer-demo/index.html

[jogibear9988]

could you add a setting, to specify the root component wich should be used?

[mar10]

i will look into the PR later (needs some docuemntation and style adjustments), but this may be a workaround for you.
The code uses an existing drop marker if any, so you could prepare one?

			$dropMarker = $("#fancytree-drop-marker");
			if (!$dropMarker.length) {
				$dropMarker = $("<div id='fancytree-drop-marker'></div>")
					.hide()
					.css({
						"z-index": 1000,
						// Drop marker should not steal dragenter/dragover events:
						"pointer-events": "none",
					})
					.prependTo("body");
				if (glyph) {
					FT.setSpanIcon(
						$dropMarker[0],
						glyph.map._addClass,
						glyph.map.dropMarker
					);
				}
			}

[jogibear9988]

nope.

this will not work.

 $("#fancytree-drop-marker");

does not search in the shadowDom

[jogibear9988]

I think it should also be possible to hand over a existing dropMarker as element.