Basic <embed-page> demo

The <embed-page/> is an open source (GitHub) proof of concept for Embeddable Progressive Application - a microapplication container implemented as WebComponent acting as

Seamless IFRAME.

Its content is embedded into page DOM, but insulated on JS, DOM, CSS and browsing context level( A links and FORM get/post ).
Unlike IFRAME it is embedded inline into parent page DOM and automatically resizing parent node.

HTML include.

With plain html and JS/css injection into page content.

Where to use?

1. Super-simple development with library of pre-made microapplications and plain html codebase. It assumes no web component knowledge and development.
2. Super-complex apps where on same page need to mix UX made with different frameworks and their incompatible otherwise revisions.
   The JS Context insulation of embed-page provides "Evolutionary architecture/Continuous Design" support to web page.

Is it safe?

<embed-page/> has been made with security considerations in mind. It is definitely safer than exposing the whole page to 3rd part scripts which is a usual practice as of now. Within <embed-page/> scripts and CSS are insulated and which makes the container page relatively safe. It is not prone for hackers though. IFRAME given some extra safeguard with loosing on integration into web page and still having some holes addressed by <embed-page/>.
The ultimate goal of <embed-page/> is to bring the web 3.0 needs to browser teams attention. Eventually making its functionality available on native level, safe and sound.
Please comment, file the bug, star <embed-page/> project to support the cause.

Try yourself

Demo cases

Navigation menu provides links to demo pages with sources, visual and unit tests. Here are some most typical uses: