Directory

embed-page - Vaadin Add-on Directory

Proof of concept for Embeddable Progressive Application - a microapplication container, a WebComponent acting as seamless IFRAME or html include embed-page - Vaadin Add-on Directory
# \ Proof of concept for [Embeddable Progressive Application](https://github.com/EPA-WG/EPA-concept) - a microapplication container, a WebComponent acting as seamless IFRAME and html include [![NPM version][npm-image]][npm-url] [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/EPA-WG/embed-page) [![Join the chat at https://gitter.im/embed-page/Lobby](https://badges.gitter.im/embed-page/Lobby.svg)](https://gitter.im/embed-page/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) ## Where to use? <embed-page/> covers 2 extreme cases. 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" support to web page. ## Security * General browser and application [security improvements overview](security.md). Briefly, increases security by jailing 3rd party content and JS, a secure alternative to directly including of 3rd party JS into page. The scope insulation for DOM and CSS is done by WebComponet shadow dom, API for JS are insulated by closure for global objects with wrappers limiting the dom access root to component content. Similar approach is applied for url, storage, cookies, etc. ## Use 1. Add to project via npm, bower, or simply placing `embed-page.js` into project tree 2. Import into page/module either by ES6 import, simple SCRIPT tag, webcomponent `link rel="import"`, or AMD require 3. Develop your reusable widgets as insulated HTML and include into page by `````` or Add some useful 3rd party [microapplication](https://github.com/EPA-WG/EPA-concept/blob/master/microapplication.md) into your page same way. The content could be set either by **src** attribute or by Polymer {{data}} binding of content; including the insulated content in TEMPLATE; or binding content via **html** attribute. ```html