Web components

Web components

[From wikipedia]

Web Components are a set of features currently being added by the W3C to the HTML and DOM specifications that allow for the creation of reusable widgets or components in web documents and web applications. The intention behind them is to bring component-based software engineering to the World Wide Web. The components model allows for encapsulation and interoperability of individual HTML elements.

Web Components consist of 4 main features which can be used separately or all together:

• Custom Elements - APIs to define new HTML elements
• Shadow DOM - Encapsulated DOM and styling, with composition
• HTML Imports - Declarative methods of importing HTML documents into other documents
• HTML Templates - The

Web components and Angular 2

Integration in Angular 2

Integrate a web component in an Angular 2 application is very easy. It depends on web component type.

Consume a library using SystemJs

SystemJs is the most used module loader in many of the Angular 2 examples currently available.

1. Configure systemjs.config.js

System.config({
    map: {
        ...,
        'angular2-library-example': 'node_modules/angular2-library-example',
        ...
    },
    packages: {
        ...,
        'angular2-library-example': {
            main: 'index'
        }
    }
}); 

2. Bootstrap the app (index.html)

System.import('build/App')

Consume a library using Webpack

1. Bootstrap the app (index.html)

`<script src="bundle.js"></script>`

2. Bundle is created according to the following webpack configuration

module.exports = {
  entry: "./src/app.ts",
  output: {
      filename: "bundle.js"
  },
  devtool: 'source-map',
  resolve: {
      extensions: ['', '.webpack.js', '.web.js', '.ts',  '.js']
  },
  module: {
      loaders: [
      { test: /\.ts$/, loader: 'ts-loader' }
      ]
  }
};

Integrate Polymer web components

1. Add the polymer webcomponent references in the index.html

`<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>`

2. Enable shadowDOM (index.html)

`<script>
  window.Polymer = {
    dom: 'shadow'
  };
</script>`

3. Import web component (index.html)

``

Creation from Angular 2 application