jsoneditor
jsoneditor copied to clipboard
josdejong
Code mode (Ace editor) not working inside shadow DOM
Hi, I want to make a JSON editor custom element. But I meet some problems. Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<!-- when using the mode "code", it's important to specify charset utf-8 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script src="jsoneditor/jsoneditor.min.js"></script>
</head>
<body>
<json-editor></json-editor>
</body>
<template id='custom-template'>
<link href="jsoneditor/jsoneditor.min.css" rel="stylesheet" type="text/css">
<div id="jsoneditor" style="width: 500px; height: 500px;"></div>
</template>
<script>
var template = document.getElementById('custom-template')
class CustomJsonEditor extends HTMLElement {
constructor() {
super();
this._shadowRoot = this.attachShadow({mode: 'open'})
this._shadowRoot.appendChild(template.content.cloneNode(true))
var options = {
mode: 'code',
modes: ["code", "tree"],
};
this.container = this._shadowRoot.querySelector('div');
this.editor = new JSONEditor(this.container, options);
}
}
customElements.define('json-editor', CustomJsonEditor);
</script>
</html>
And the Json editor will become this:
It seems that I need to load the ace theme somewhere, right? I am a beginner on JavaScript. Could you give me some helps? Thank you.
I've put your example in a jsbin:
https://jsbin.com/dizutop/edit?html,output
It looks indeed like the CSS of the code editor, powered by Ace editor, is not loaded inside the shadow DOM. I have to say, I've never used shadow DOM so far and never tried JSONEditor inside shadow DOM, so it's good to see that it (mostly) works, only this CSS issue with Ace editor is odd. We'll have to do some debugging there. A workaround could be to not use shadow DOM.
I'm assuming you came up with a workaround since this is over a year old. I'm posting this workaround here for anyone that stumbled on this like me. Reference https://github.com/ajaxorg/ace/issues/3850
Just add this line right after creating your editor instance.
this.editor.aceEditor.renderer.attachToShadowRoot();
Thanks for sharing your solution Jonathan! Looks like quite an easy fix. So then we should detect when being loaded inside Shadow DOM and if so, apply this fix.
Anyone able to create a PR with a solution for shadow DOM?