quill
quill copied to clipboard
Published
20 hours ago •
slab
slab
Missing border on text body
I'm getting a missing border in the text body when I load quill via a custom element.
Steps for Reproduction
Here is a demo of the bug: https://jsfiddle.net/0fL9aph5/1/
Set stylesheet in head tags
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet" />
</head>
Load Quill via a custom element:
class QuillElement extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this._editor = new Quill(this, {
theme: "snow",
});
}
}
Expected behavior:
Border showing
Actual behavior:
Border is not showing
Platforms:
All browsers
Version:
2.0.0
My work around fix is to use shadow dom and set the style sheets when the element is connected:
class QuillElement extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: "open" });
// Create the Quill container element
const editor = document.createElement("div");
editor.id = "editor";
shadowRoot.appendChild(editor);
this.quillInstance = null;
this.editorElement = editor;
}
async fetchAndAdoptStyles() {
const response = await fetch(
"https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css"
);
const styles = await response.text();
const styleSheet = new CSSStyleSheet();
styleSheet.replaceSync(styles);
this.shadowRoot.adoptedStyleSheets = [styleSheet];
}
connectedCallback() {
this.fetchAndAdoptStyles().then(() => {
this.quillInstance = new Quill(this.editorElement, {
theme: "snow",
});
});
}
}