I am testing changes to my frontend framework, Places.js that allow creating components without shadow DOM. Previously, all Places.js components had to be created with shadow DOM that required styles to be encapsulated.

In addition to improving flexibility, these changes give another option to optimize rendering performance and make the development experience closer to working with vanilla frontend tools. I want Places.js development to be easy to pick up for anyone familiar with CSS, HTML, and JavaScript.

The changes involved removing code from Places.js. Places.js already has a BaseTemplateComponent class that can be extended to enable shadow DOM components.

Here is an example of what a login component looks like inside shadow DOM.