How to encapsulate dynamically added elements in Angular 2?

Question

Trying to make MDL working with Angular2.

With shadow DOM emulation angular encapsulates all css and html which it gains from code. But when I use componentHandler.upgradeElement(), it creates new elements with no encapsulation.

What should I do to make it encapsulated too?

Answer 1

Adding this simple directive mdl element!

import {Component, ElementRef } from 'angular2/core';
declare var componentHandler: any;


@Component({
    selector: '[mdl]',
    template: `<ng-content></ng-content>`
})



    export class MdlComponent {

    constructor(public el: ElementRef) {

        MdlComponent.mdlWrapper(el);

    }

    static mdlWrapper(element: ElementRef) {

        componentHandler.upgradeElement(element.nativeElement);
    }
}