diff --git a/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.css b/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.css
index 5aadf220a0..5989db0e26 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.css
+++ b/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.css
@@ -1,3 +1,3 @@
-adf-create-process-attachment >>> button {
+adf-create-process-attachment ::ng-deep button {
     float: right;
 }
diff --git a/demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.css b/demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.css
index b2f8142604..b267b82e42 100644
--- a/demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.css
+++ b/demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.css
@@ -1,3 +1,3 @@
-adf-create-task-attachment >>> button {
+adf-create-task-attachment ::ng-deep button {
     float: right;
 }
diff --git a/demo-shell-ng2/app/components/datatable/datatable-demo.component.css b/demo-shell-ng2/app/components/datatable/datatable-demo.component.css
index a4d9493a15..207585ba57 100644
--- a/demo-shell-ng2/app/components/datatable/datatable-demo.component.css
+++ b/demo-shell-ng2/app/components/datatable/datatable-demo.component.css
@@ -1,10 +1,10 @@
-adf-datatable >>> .custom-row-style.alfresco-datatable__row:focus {
+adf-datatable ::ng-deep .custom-row-style.alfresco-datatable__row:focus {
     outline-offset: -1px;
     outline-width: 1px;
     outline-color: green;
     outline-style: solid;
 }
 
-adf-datatable >>> .custom-row-style.alfresco-datatable__row--selected {
+adf-datatable ::ng-deep .custom-row-style.alfresco-datatable__row--selected {
     color: green;
 }
diff --git a/demo-shell-ng2/app/components/file-view/file-view.component.ts b/demo-shell-ng2/app/components/file-view/file-view.component.ts
index ba713f6aaf..6137f1b575 100644
--- a/demo-shell-ng2/app/components/file-view/file-view.component.ts
+++ b/demo-shell-ng2/app/components/file-view/file-view.component.ts
@@ -1,3 +1,20 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AlfrescoApiService } from 'ng2-alfresco-core';
diff --git a/demo-shell-ng2/app/components/files/files.component.scss b/demo-shell-ng2/app/components/files/files.component.scss
index 342376147c..9cbbedf006 100644
--- a/demo-shell-ng2/app/components/files/files.component.scss
+++ b/demo-shell-ng2/app/components/files/files.component.scss
@@ -22,19 +22,19 @@ $minimumDocumentListWidth: 425px;
     height:900px;
 }
 
-adf-document-list >>> adf-datatable tr.is-selected .image-table-cell {
+adf-document-list ::ng-deep adf-datatable tr.is-selected .image-table-cell {
     position: relative;
 }
 
-adf-document-list >>> adf-datatable tr.document-list__create {
+adf-document-list ::ng-deep adf-datatable tr.document-list__create {
     background: green !important;
 }
 
-adf-document-list >>> adf-datatable tr.document-list__disable {
+adf-document-list ::ng-deep adf-datatable tr.document-list__disable {
     background: red !important;
 }
 
-adf-document-list >>> adf-datatable tr.is-selected .image-table-cell::before {
+adf-document-list ::ng-deep adf-datatable tr.is-selected .image-table-cell::before {
     content: "\E876"; /* "done" */
     font-family: "Material Icons";
     font-size: 24px;
diff --git a/demo-shell-ng2/app/components/form/demo-form.ts b/demo-shell-ng2/app/components/form/demo-form.ts
index a496247fac..daae995c37 100644
--- a/demo-shell-ng2/app/components/form/demo-form.ts
+++ b/demo-shell-ng2/app/components/form/demo-form.ts
@@ -2,14 +2,14 @@
  * @license
  * Copyright 2016 Alfresco Software, Ltd.
  *
- * Licensed under the Apache License, Version 2.0 (the 'License');
+ * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an 'AS IS' BASIS,
+ * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
diff --git a/demo-shell-ng2/app/components/login/login-demo.component.css b/demo-shell-ng2/app/components/login/login-demo.component.css
index 32185b2b02..db7a097696 100644
--- a/demo-shell-ng2/app/components/login/login-demo.component.css
+++ b/demo-shell-ng2/app/components/login/login-demo.component.css
@@ -35,6 +35,6 @@
     }
 }
 
-.settings >>> .mat-slide-toggle-thumb-container {
+.settings ::ng-deep .mat-slide-toggle-thumb-container {
     cursor: pointer;
 }
diff --git a/demo-shell-ng2/app/polyfills.ts b/demo-shell-ng2/app/polyfills.ts
index 4a48f9b812..836039ee8e 100644
--- a/demo-shell-ng2/app/polyfills.ts
+++ b/demo-shell-ng2/app/polyfills.ts
@@ -1,3 +1,20 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /* tslint:disable */
 
 import 'core-js/es6/reflect';
diff --git a/demo-shell-ng2/app/vendor.ts b/demo-shell-ng2/app/vendor.ts
index 3580c04f97..f846cac054 100644
--- a/demo-shell-ng2/app/vendor.ts
+++ b/demo-shell-ng2/app/vendor.ts
@@ -1,3 +1,20 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /* tslint:disable */
 
 // Angular
diff --git a/demo-shell-ng2/config/webpack.common.js b/demo-shell-ng2/config/webpack.common.js
index 433247c7e9..99dffd6cf7 100644
--- a/demo-shell-ng2/config/webpack.common.js
+++ b/demo-shell-ng2/config/webpack.common.js
@@ -76,7 +76,7 @@ module.exports = {
                     emitErrors: true,
                     licenseFile: path.resolve(__dirname, '../assets/license_header.txt')
                 },
-                exclude: [/node_modules/, /bundles/, /dist/, /demo/]
+                exclude: [/theme-picker/]
             }
         ]
     },
diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index d55de39616..69eb46529a 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -131,6 +131,7 @@
     "karma-remap-istanbul": "0.6.0",
     "karma-sourcemap-loader": "0.3.7",
     "karma-webpack": "2.0.3",
+    "loader-utils": "^1.1.0",
     "node-sass": "4.5.3",
     "null-loader": "0.1.1",
     "raw-loader": "0.5.1",
diff --git a/docs/data-column.component.md b/docs/data-column.component.md
index 1396629864..e8fb893b16 100644
--- a/docs/data-column.component.md
+++ b/docs/data-column.component.md
@@ -204,11 +204,11 @@ Let's start by assigning an "image-table-cell" class to the thumbnail column:
 Now your application can define styles to change the content of the column based on conditions such as the selection state:
 
 ```css
-adf-document-list >>> adf-datatable tr.is-selected .image-table-cell {
+adf-document-list ::ng-deep adf-datatable tr.is-selected .image-table-cell {
     position: relative;
 }
 
-adf-document-list >>> adf-datatable tr.is-selected .image-table-cell::before {
+adf-document-list ::ng-deep adf-datatable tr.is-selected .image-table-cell::before {
     content: "\E876"; /* "done" */
     font-family: "Material Icons";
     font-size: 24px;
@@ -238,11 +238,11 @@ You can hide columns on small screens using custom CSS rules:
 ```css
 @media all and (max-width: 768px) {
 
-    alfresco-document-list >>> th.desktop-only .cell-value {
+    alfresco-document-list ::ng-deep th.desktop-only .cell-value {
         display: none;
     }
 
-    alfresco-document-list >>> td.desktop-only .cell-value {
+    alfresco-document-list ::ng-deep td.desktop-only .cell-value {
         display: none;
     }
 }
diff --git a/docs/permissions-style.model.md b/docs/permissions-style.model.md
index d9a061e3c3..5573a11489 100644
--- a/docs/permissions-style.model.md
+++ b/docs/permissions-style.model.md
@@ -40,7 +40,7 @@ this.permissionsStyle.push(new PermissionStyleModel('document-list__create', Per
 ```
 
 ```css
-adf-document-list >>> adf-datatable tr.document-list__create {
+adf-document-list ::ng-deep adf-datatable tr.document-list__create {
     background: green !important;
 }
 ```
@@ -61,7 +61,7 @@ this.permissionsStyle.push(new PermissionStyleModel('document-list__disable', Pe
 ```
 
 ```css
-adf-document-list >>> adf-datatable tr.document-list__disable {
+adf-document-list ::ng-deep adf-datatable tr.document-list__disable {
     background: red !important;
 }
 ```
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.scss b/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.scss
index 44584a674d..b24e2b4f1b 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.scss
+++ b/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.scss
@@ -25,7 +25,7 @@
     text-transform: uppercase;
 }
 
-adf-people >>> .assignment-top-container{
+adf-people ::ng-deep .assignment-top-container{
     background-color: #fff;
 }