diff --git a/docs/ng-cli-webpack.adoc b/docs/ng-cli-webpack.adoc
index 6a9e54e..0878d4e 100644
--- a/docs/ng-cli-webpack.adoc
+++ b/docs/ng-cli-webpack.adoc
@@ -97,7 +97,12 @@ Open the [filename]#src/index.html# file and append the following lines to the [
...
-
+
+
@@ -143,14 +148,14 @@ The [filename]#webcomponents.js# polyfill is not necessary for browsers that ful
[TIP]
====
-Optionally, you can move the [filename]#webcomponents-lite.min.js# from the application [filename]#index.html# to the [filename]#angular-cli.json# configuration file.
+Optionally, you can move the [filename]#webcomponents.min.js# from the application [filename]#index.html# to the [filename]#angular-cli.json# configuration file.
[source, json]
.angular-cli.json
----
{
"scripts":[
- "assets/bower_components/webcomponentsjs/webcomponents-lite.min.js"
+ "assets/bower_components/webcomponentsjs/webcomponents.min.js"
]
}
----
diff --git a/docs/overview.adoc b/docs/overview.adoc
index a71b397..1a23ab3 100644
--- a/docs/overview.adoc
+++ b/docs/overview.adoc
@@ -23,12 +23,17 @@ Since Vaadin Elements are built using Polymer, you need the [literal]#https://gi
[prompt]#$# [command]#bower# install [replaceable]#element-name#
----
-. Load the Web Components polyfill for browsers that don’t have native support for the Web Components standards, and then import the elements you want to use.
+. Load the Web Components polyfill for browsers that don’t have native support for the Web Components standards, and configure Polymer to use Shadow DOM. Then you can import the elements you want to use.
+
[source,html,subs="normal"]
.index.html
----
-
+
+
----
+
diff --git a/docs/tutorial/polymer.adoc b/docs/tutorial/polymer.adoc
index 0f663d4..965a6ae 100644
--- a/docs/tutorial/polymer.adoc
+++ b/docs/tutorial/polymer.adoc
@@ -15,9 +15,15 @@ In your project root, edit the [filename]#index.html# file and replace the conte
-
+
+
+
@@ -67,7 +73,10 @@ The Doctype Declaration::
We added the `` declaration in the first line of the HTML file. It switches document to use the Standards mode, as required by the internals of [vaadinelement]#vaadin-grid#.
The Web Components Polyfill::
-The technology stack behind Web Components (namely, HTML Imports, Shadow DOM, and Custom Elements) is not yet natively supported in all browsers. Therefore, we added the [filename]#webcomponents-lite.min.js# polyfill.
+The technology stack behind Web Components (namely, HTML Imports, Shadow DOM, and Custom Elements) is not yet natively supported in all browsers. Therefore, we added the [filename]#webcomponents.min.js# polyfill.
+
+Configure Polymer DOM::
+By default, Polymer uses shady DOM, which is not compatible with Angular. We created the Polymer global settings object and set it to use shadow DOM instead.
Importing Polymer Elements::
We added imports of Polymer elements that we are going to use in our application to the head section of the [filename]#index.html# file.
@@ -109,4 +118,3 @@ The HTML imports we have in the [filename]#index.html# file also import any poss
See http://w3c.github.io/webcomponents/spec/imports/#fetching-import[Fetching Import section of the HTML Imports Spec] for more detailed information about the fetching algorithm.
====
-