Missing border on text body #4160

EvanPiro · 2024-05-01T14:37:38Z

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/quill@2.0.0/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

The text was updated successfully, but these errors were encountered:

EvanPiro · 2024-05-01T15:13:32Z

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/quill@2.0.0/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",
      });
    });
  }
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Missing border on text body #4160

Missing border on text body #4160

EvanPiro commented May 1, 2024 •

edited

EvanPiro commented May 1, 2024

Missing border on text body #4160

Missing border on text body #4160

Comments

EvanPiro commented May 1, 2024 • edited

EvanPiro commented May 1, 2024

EvanPiro commented May 1, 2024 •

edited