Example Idea: Updating header styles when adding a new component in Experience Editor

[nickwesselman]

Client-side rendering is not performed when a new component is added to a placeholder in the Experience Editor. Only the markup of the component is added.

One particular result of the current behavior is that the page might look different before and after saving.

For example, if styled-components are used, the styles are not applied when a component is initially added to a page. Nevertheless, they are shown when a route is reloaded after saving.

This could be implemented as a global jQuery AJAX "hook" for the experience editor. When page editing responses come in, the existing styles would be replaced.

Something like this:

// select possible existing styles
var existingStyles = document.querySelector('style[data-styled]')

// prevent multiple <style /> with same styles.
if (existingStyles) {
  existingStyles.remove();
}

// select styles from server response
var styles = ajaxDoc.querySelector('style[data-styled]');
var head = $sc(document.querySelector('head'))
head.append(styles);