Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/epa-wg/embed-page
Proof of concept for Embeddable Progressive Application - a microapplication container, a WebComponent acting as seamless IFRAME or html include
https://github.com/epa-wg/embed-page
3rd-party concept dom iframe javascript-library polymer proof shadow-dom webcomponents
Last synced: about 1 month ago
JSON representation
Proof of concept for Embeddable Progressive Application - a microapplication container, a WebComponent acting as seamless IFRAME or html include
- Host: GitHub
- URL: https://github.com/epa-wg/embed-page
- Owner: EPA-WG
- License: apache-2.0
- Created: 2018-01-19T05:01:33.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-22T06:27:31.000Z (almost 2 years ago)
- Last Synced: 2024-04-15T01:09:43.879Z (8 months ago)
- Topics: 3rd-party, concept, dom, iframe, javascript-library, polymer, proof, shadow-dom, webcomponents
- Language: JavaScript
- Homepage: https://www.webcomponents.org/element/EPA-WG/embed-page
- Size: 2.27 MB
- Stars: 17
- Watchers: 5
- Forks: 5
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: security.md
Awesome Lists containing this project
README
# \
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
[ GitHub](https://github.com/EPA-WG/embed-page)
| [demo](https://cdn.xml4jquery.com/ajax/libs/embed-page/0.0.20/build/esm-unbundled/demo/index.html)
[![NPM version][npm-image]][npm-url]
[](https://www.webcomponents.org/element/embed-page)
## 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
h1{color:chocolate;}
In chocolate only itself, no fumes spread.
```
At the moment ``` ``` resides in Polymer echosystem, file the
[change request](https://github.com/EPA-WG/embed-page/issues) if need other or no framework compatibility.
### Dependencies
Polymer 3 Element is a base for embed-page. No other dependencies in run time planned before first release
( currently project is in pre-release alpha stage). Polymer Paper Elements and Vaadin are used for demo and
are not required to use \
## To see in action
See the live basic [DEMO on CDN](https://cdn.xml4jquery.com/ajax/libs/embed-page/0.0.20/build/esm-unbundled/demo/index.html)
, [JSFiddle](https://jsfiddle.net/suns2015/k2sdfrt1/)
, or locally run
```bash
$ polymer serve --open
```
It will open the demo page in browser.
In demo the external page is loaded into shadow dom and its embedded and referenced JS
will work with document via wrapper in same way as standalone page.
The host page document is not available from embedded content, which is validated by using
same DOM selectors as in host page as in instances of ``` ```.
# Project
## Install the Polymer-CLI
First, make sure you have npm (packaged with [Node.js](https://nodejs.org)) installed.
Run `npm install` to install your element's dependencies, then run `polymer serve`
to serve your element locally.
## Viewing Your Element
```
$ polymer serve
```
## Running Tests
```
$ polymer test
```
Demo pages are set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
[npm-image]: https://img.shields.io/npm/v/embed-page.svg
[npm-url]: https://npmjs.org/package/embed-page