我想在自定义元素内动态创建一个 CodeMirror 实例,并将其存在于元素的 Shadow DOM 内。例如:
<code-mirror>foo</code-mirror>
<script>
window.customElements.define('code-mirror', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
}
connectedCallback() {
this.cm = CodeMirror(this.shadowRoot, {lineNumbers: true});
}
});
</script>
这“有效”,但布局完全错误。左边距设置为窗口的宽度,行号未正确显示,并且选择逻辑在垂直方向上偏离了几行。
这是一个演示布局问题的 jsfiddle:link
建议?
将 CodeMirror 的样式表导入到影子 DOM 中@import url
:
constructor() {
super();
let shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
<style>
@import url(https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.24.2/codemirror.min.css)
</style>`
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)