branflake2267/MyFroalaEditorElement.js

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Froala Editor Web Component Example</title>

    <!-- Import the web component, an html element -->
    <script src='./MyFroalaEditorElement.js'></script>
  </head>
  <body>

    <!-- My Froala Editor Web Component usage -->
    <my-froala-editor></my-froala-editor>

  </body>
</html>

## MyFroalaEditorElement.js
class MyFroalaEditorElement extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `
      <link href='https://cdn.jsdelivr.net/npm/froala-editor@3.0.6/css/froala_editor.pkgd.min.css' rel='stylesheet'
        type='text/css' />

      <div class='editor'></div>
      `;

    this.importFroalaJs()
      .then(() => {
        let shadowFroalaEditorEl = this.shadowRoot.querySelector('.editor');
        new FroalaEditor(shadowFroalaEditorEl);
      }).then(() => {
        this._addListeners();
      });
  }

  _addListeners() {
  }

  importFroalaJs() {
    // Load the Froala Editor once into the global scope.
    return new Promise((resolve, reject) => {
      if (typeof FroalaEditor == "undefined") {
        let src = 'https://cdn.jsdelivr.net/npm/froala-editor@3.0.6/js/froala_editor.pkgd.min.js';
        let script = document.createElement('script');
        script.setAttribute('src', src);
        script.addEventListener('load', resolve);
        document.head.appendChild(script);
      } else {
        resolve();
      }
    });
  }

}
// Register the element
window.customElements.define('my-froala-editor', MyFroalaEditorElement);
	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple Froala Editor Web Component Example</title>

	<!-- Import the web component, an html element -->
	<script src='./MyFroalaEditorElement.js'></script>
	</head>
	<body>

	<!-- My Froala Editor Web Component usage -->
	<my-froala-editor></my-froala-editor>

	</body>
	</html>
	class MyFroalaEditorElement extends HTMLElement {
	constructor() {
	super();
	}

	connectedCallback() {
	this.attachShadow({mode: 'open'});
	this.shadowRoot.innerHTML = `
	<link href='https://cdn.jsdelivr.net/npm/froala-editor@3.0.6/css/froala_editor.pkgd.min.css' rel='stylesheet'
	type='text/css' />

	<div class='editor'></div>
	`;

	this.importFroalaJs()
	.then(() => {
	let shadowFroalaEditorEl = this.shadowRoot.querySelector('.editor');
	new FroalaEditor(shadowFroalaEditorEl);
	}).then(() => {
	this._addListeners();
	});
	}

	_addListeners() {
	}

	importFroalaJs() {
	// Load the Froala Editor once into the global scope.
	return new Promise((resolve, reject) => {
	if (typeof FroalaEditor == "undefined") {
	let src = 'https://cdn.jsdelivr.net/npm/froala-editor@3.0.6/js/froala_editor.pkgd.min.js';
	let script = document.createElement('script');
	script.setAttribute('src', src);
	script.addEventListener('load', resolve);
	document.head.appendChild(script);
	} else {
	resolve();
	}
	});
	}

	}
	// Register the element
	window.customElements.define('my-froala-editor', MyFroalaEditorElement);