I am trying to architect an extendable Web applications that allows users to build and export static websites. Similar to this site and this site, except developers can build their own custom components using HTML,CSS and Javascript and add it to the public library.
The Architecture must:
- Ensure that user added components can not interfere with each other (Encapsulation)
- HTML attributes have unique values (
<div id="a">remains unique to this component) - CSS is namespaced
- Javascript objects are scoped and can only modify DOM elements within this component.
- HTML attributes have unique values (
- Enable developers to build components in simple HTML, CSS, Javascript without the need for building a React/Vue/Angular etc. JS components.
- Developers can build components without worrying about encapsulation issues above. i.e. The application transforms the unsafe HTML,CSS,Javascript to one which is safe.
- Ensures cross-browser compatibility
iFrames provide excellent encapsulation but have performance and device scaling issues. I have been reading about Shadow DOM, Web components but haven't been able to figure out the correct approach to build such a Web Application.
I also came across this SO Question but it seems like this is more geared toward back-end. Please correct me if I am wrong. Is there any existing framework/build tools/library that I can use? If not how should I go about building such a tool?
