{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/6864","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/6864/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/6864/comments","events_url":"https://api.github.com/repos/angular/angular/issues/6864/events","html_url":"https://github.com/angular/angular/issues/6864","id":131011617,"number":6864,"title":"ViewEncapsulation.Native","user":{"login":"aquinum6","id":1774702,"avatar_url":"https://avatars.githubusercontent.com/u/1774702?v=3","gravatar_id":"","url":"https://api.github.com/users/aquinum6","html_url":"https://github.com/aquinum6","followers_url":"https://api.github.com/users/aquinum6/followers","following_url":"https://api.github.com/users/aquinum6/following{/other_user}","gists_url":"https://api.github.com/users/aquinum6/gists{/gist_id}","starred_url":"https://api.github.com/users/aquinum6/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aquinum6/subscriptions","organizations_url":"https://api.github.com/users/aquinum6/orgs","repos_url":"https://api.github.com/users/aquinum6/repos","events_url":"https://api.github.com/users/aquinum6/events{/privacy}","received_events_url":"https://api.github.com/users/aquinum6/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2016-02-03T12:37:04Z","updated_at":"2016-02-08T06:44:01Z","closed_at":null,"body":"I wonder if this by design because it's working quite different in Polymer, and polymer is shadow DOM as well (isn't it?).\r\n\r\nFor example this code\r\nfile.ts:\r\n```\r\nimport {Component, ViewEncapsulation} from 'angular2/core';\r\n\r\n@Component({\r\n    selector:'native-2',\r\n    template:`\r\n    <div class=\"class-1\"> <!-- css class is working fine -->\r\n        <native-encaps-component> <!-- really awesome component with ViewEncapsulation.Native -->\r\n            <div class=\"class-2\"> <!-- css class is not working in here -->\r\n                Anything\r\n            </div>\r\n        </native-encaps-component>\r\n    </div>\r\n    `,\r\n    styleUrls:['style.css'],\r\n    encapsulation: ViewEncapsulation.Native\r\n})\r\nexport class something{\r\n}\r\n```\r\nstyle.css:\r\n```\r\n.class-1{\r\n    //definition\r\n}\r\n\r\n.class-2{\r\n    //definition\r\n}\r\n```\r\n\r\nI have described it in comments which classes are not applied (css style). I wonder if that's not a mistake. How about I want to create 2 native components from which second is extending first one and in final app both will be used (not only the second one).\r\n\r\nIf I use Emulated encapsulation everything seems to be working fine but with Native it's not."},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/181227559","html_url":"https://github.com/angular/angular/issues/6864#issuecomment-181227559","issue_url":"https://api.github.com/repos/angular/angular/issues/6864","id":181227559,"user":{"login":"zoechi","id":405837,"avatar_url":"https://avatars.githubusercontent.com/u/405837?v=3","gravatar_id":"","url":"https://api.github.com/users/zoechi","html_url":"https://github.com/zoechi","followers_url":"https://api.github.com/users/zoechi/followers","following_url":"https://api.github.com/users/zoechi/following{/other_user}","gists_url":"https://api.github.com/users/zoechi/gists{/gist_id}","starred_url":"https://api.github.com/users/zoechi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zoechi/subscriptions","organizations_url":"https://api.github.com/users/zoechi/orgs","repos_url":"https://api.github.com/users/zoechi/repos","events_url":"https://api.github.com/users/zoechi/events{/privacy}","received_events_url":"https://api.github.com/users/zoechi/received_events","type":"User","site_admin":false},"created_at":"2016-02-08T06:44:01Z","updated_at":"2016-02-08T06:44:01Z","body":"I assume the difference is that `<ng-content>` is an Angular feature and `<content>` is a browser feature. I also assume `<content>` only works with `ViewEncapsulation.Native` when the browser has native shadow DOM support or when full web-components polyfills are loaded.\r\n\r\nIf `<content>` works but `<ng-content>` doesn't it looks like a Angular bug. \r\nA Plunker with a repo case would be great."}}