Add instructions to support Angular v.2.2.0

platosha · Nov 23, 2016 · 86632b0 · 86632b0 · Splaktar · Dec 16, 2016
1 parent a14c421
commit 86632b0
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git 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 [
 <head>
   ...
 
-  <script src="assets/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+  <script src="assets/bower_components/webcomponentsjs/webcomponents.min.js"></script>
+  <script>
+    window.Polymer = {
+      dom: 'shadow'
+    };
+  </script>
   <link rel="import" href="assets/bower_components/paper-styles/color.html">
   <link rel="import" href="assets/bower_components/paper-styles/typography.html">
   <link rel="import" href="assets/bower_components/vaadin-combo-box/vaadin-combo-box.html">
@@ -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
@@ -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
 ----
-<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
+<script>
+  window.Polymer = {
+    dom: 'shadow'
+  };
+</script>
 <link rel="import" href="bower_components/[replaceable]#element-name#/[replaceable]#element-name#.html">
 ----
 +

diff --git 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
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- Polyfills -->
-    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
+    <script>
+      window.Polymer = {
+        dom: 'shadow'
+      };
+    </script>
+
     <!-- JavaScript libraries -->
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
@@ -67,7 +73,10 @@ The Doctype Declaration::
 We added the `<!DOCTYPE html>` 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.
 ====
-