Use ShadyDOM.upgrade

This is a more optimized way to create and populate a `shadowRoot`.

Author: Steven Orvell

lib/mixins/element-mixin.js

@@ -672,9 +672,13 @@ export const ElementMixin = dedupingMixin(base => {
       if (n.attachShadow) {
         if (dom) {
           if (!n.shadowRoot) {
-            n.attachShadow({mode: 'open'});
+            if (window.ShadyDOM) {
+              ShadyDOM.upgrade(dom, this, {mode: 'open'});
+            } else {
+              n.attachShadow({mode: 'open'});
+              n.shadowRoot.appendChild(dom);
+            }
           }
-          n.shadowRoot.appendChild(dom);
           if (syncInitialRender && window.ShadyDOM) {
             ShadyDOM.flushInitial(n.shadowRoot);
           }