HTML include - embed-page demo

src attribute along with scope="none" makes HTML include similar to server side. Dependent JS and CSS resources will be embedded into scope of host page.

HTML include pattern ( also known as seamless iframe ) is an alternative to the use of WebComponent. Good as for beginners with limited to HTML skill set as for pros wanted to keep the KISS principle in web app.

Microapplication vs. include

With scope="none" the content of embed-page has no insulation from home page which could cause the conflict on JS and CSS levels. It is good to use include pattern when the sources of embedded HTML sections belong to same application with common architecture and release schedule.
The good samples of such use will be a navigation menu or common CSS theme components.

Limitations

  1. Performance For single use of external content on the page the include pattern is more efficient than WebComponent making the load lighter. With multiple inclusions of same content, the WebComponent does it more efficiently by loading and parsing content only once.
  2. External content ( from independent apps ) better to be served as microapplication to prevent the interference with host app and other apps on same page.

embed-page demo uses menu from demo-menu.html which holds as menu content as common styling for demo pages as inner shadow for embed-page

Visual demo steps

The menu should be shown on page right top side and in demo snipplet above.
CSS
    1. The menu should have gray inner shadow.
    2. The page menu should be located on the right side.
JS  3. current page( HTML include ) on menu should be in bold.
    4. Links on menu should open the page in same browser page.

More

  1. Dynamic url and content binding for examples of URL change.
  2. Demo home for other scope options.