Add option to enable the style element rendering

[Mgsy]

📝 Provide a description of the new feature

Currently, we don't render the <style> element, but preserve it in the data. Sometimes, the loaded content (for example from CKEditor 4) might include some styles that should be preserved. 

This feature request is for introducing an option to add support for enabling <style> rendering on demand.

---

If you'd like to see this feature implemented, add a 👍 reaction to this post.

[Reinmar]

The problem with rendering <style> elements is that their content will affect the entire page. Not only the contents of the editor.

One hack around this would be to parse the content of these <style> elements and prefix every selector with a unique class name or id name. And use the same id/class on the editable element of the editor. The problem with this is that it'd affect the specificity of those rules and might be hard to figure out what's happening. That's why I'd consider using a class instead of id because it has a smaller effect. Though, it'd still lead to some issues.

[Reinmar]

One hack around this would be to parse the content of these <style> elements and prefix every selector with a unique class name or id name.

We discussed this F2F and automat style prefixing isn't trivial. There are many scenarios like:

• selectors utilizing media queries
• selectors that use specifiers that are outside the editor (e.g. body p, prefixing it with #ck-sth body p would not work)
• finally, specificity will be affected so such selectors may start working differently than in the editor output

Thus, we still believe that we can only achieve here the very basic thing which is rendering the content of the <style> element, without changing it in any way (so, with the risk that it will leak from the editor).

[Reinmar]

I created a PoC showing a simple plugin that enables rendering the <style> elements within the editor: https://github.com/ckeditor/ckeditor5/compare/t/12838-render-style

The plugin is really simple:

function RenderStyleElements( editor ) {
	// Remove the 'style' name from the list of unsafe elements.
	const unsafeElements = editor.editing.view.domConverter.unsafeElements;
	const indexOfStyle = unsafeElements.indexOf( 'style' );

	if ( indexOfStyle > -1 ) {
		unsafeElements.splice( indexOfStyle, 1 );
	}
}

It has to be combined with GHS (as in the linked example) or a custom converter for <style> elements (but I recommend using GHS in this case as it's the simplest).

NOTE: We don't plan to release such a plugin officially because it's fairly simple to customize the editor with a custom plugin. Also, we don't want to promote rendering <style> elements in our documentation so no documentation work follows.