Shadow DOM

Permite ejecutar el editor dentro de una raíz de sombra, por ejemplo, en tu propio componente web o en un microfrontend. Las hojas de estilos de la página no llegan al interior de una raíz de sombra, así que, sin ayuda, el editor no tendría estilos; este plugin copia las hojas de estilos del propio editor a la raíz de sombra que lo contiene y sigue copiando las que añaden después los plugins.

Un editor dentro de la raíz de sombra de un elemento personalizado, con una barra de herramientas con estilos y el cuadro de diálogo Insert Link abierto a su lado, que muestra los campos URL y Text, Open in new tab, Cancel e Insert — Un editor creado dentro de la raíz de sombra de un elemento personalizado, con el cuadro de diálogo Insert Link abierto. Ambos tienen estilos.

Cómo activarlo

Esta función la ofrece el plugin shadowdom.js (también incluido en plugins/all_plugins.js). Carga la hoja de estilos del editor en la página como de costumbre y crea el editor sobre un elemento dentro de la raíz de sombra; el plugin se encarga del resto. No hay ningún botón.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>

<note-editor id="host"></note-editor>
<script>
class NoteEditor extends HTMLElement {
  connectedCallback() {
    const root = this.attachShadow({ mode: "open" });
    root.innerHTML = '<div class="box"><p>Text inside a <b>shadow root</b>.</p></div>';
    this.editor = new RichTextEditor(root.querySelector(".box"), { toolbar: "basic", height: "220px" });
  }
}
customElements.define("note-editor", NoteEditor);
</script>

El elemento <rich-text-editor> predefinido de rte-webcomponent.js usa el mismo plugin: añade el atributo shadow y montará el editor en su propia raíz de sombra.

<script src="/richtexteditor/rte-webcomponent.js"></script>
<rich-text-editor shadow toolbar="basic" height="220px"><p>Hello</p></rich-text-editor>

Si shadowdom.js no está cargado, ese elemento muestra una advertencia en la consola y permanece en el DOM ligero en lugar de mostrarse sin estilos.

Opciones

Opción	Valor predeterminado	Función
`shadowStyleAdoption`	`true`	Copia las hojas de estilos del editor a la raíz de sombra. `false` desactiva la copia.
`shadowStyleSources`	`null`	URL de hojas de estilos adicionales para añadir a la raíz de sombra, como cadena o arreglo, para tus propias personalizaciones de apariencia.

Qué se copia

<link rel="stylesheet"> Elementos servidos desde la carpeta desde la que se cargó rte.js o cuyos nombres de archivo corresponden al editor (rte_theme, rte_mobile, richtexteditor_content, richtexteditor_preview, aitoolkit). Se vuelven a crear como elementos <link> nuevos con la misma URL, por lo que proceden de la caché del navegador.
<style> Elementos cuyo id empieza por rte- o __rte (los estilos de los plugins), y elementos <style> sin id cuyo CSS menciona los selectores del editor, que es la forma en que empaquetadores como Vite inyectan un tema importado.
Hojas de estilos que la página ha adoptado con document.adoptedStyleSheets.

No se copia nada más de la página, de modo que tu componente conserva su encapsulación. Cada copia lleva data-rte-adopted="1". En la página de prueba anterior se copiaron 9 hojas de estilos (el tema, la hoja de estilos de AI Toolkit y los elementos <style> de los plugins), y la barra de herramientas medía 41 píxeles de alto. Con shadowStyleAdoption: false medía 7,561 píxeles de alto: una columna de botones sin estilos.

El plugin observa el <head>de la página, por lo que también se copia un estilo de plugin añadido después del inicio, cuando se abre su panel por primera vez. Los cuadros de diálogo y menús se crean dentro del elemento del editor, así que están dentro de la raíz de sombra y usan los estilos copiados.

API

editor.isInShadowDom() — true cuando el editor está dentro de una raíz de sombra.
editor.getShadowRoot() — esa raíz de sombra, o null.
editor.getAdoptedStyleCount() — cuántas hojas de estilos se han copiado (9 arriba).
editor.adoptEditorStyles(target) — copia las hojas de estilos del editor a otra raíz, por ejemplo, una segunda raíz de sombra que muestre una vista previa. Sin argumento, usa la raíz de sombra del propio editor.

Aspectos a tener en cuenta

El área de edición es un iframe, así que el CSS del documento se carga en él como de costumbre (contentCssUrl); este plugin solo se ocupa de la barra de herramientas, los menús y los cuadros de diálogo del editor.
Fuera de una raíz de sombra, el plugin no hace nada ni crea ningún observador.
Tus personalizaciones del aspecto del editor que estén en la hoja de estilos de la página no llegan al interior de la raíz de sombra. Inclúyelas en shadowStyleSourceso colócalas tú mismo dentro de la raíz de sombra.
El HTML guardado no se ve afectado; getHTMLCode() devolvió <p>Text inside a <b>shadow root</b>.</p>.

Relacionado: Inicio rápido, Validación de formularios.