How to encapsulate dynamically added elements in Angular 2?

问题

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?

回答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);
    }
}

来源：https://stackoverflow.com/questions/33386129/how-to-encapsulate-dynamically-added-elements-in-angular-2