Globally hide dom-{bind,if,repeat} elements with legacyOptmizations on

lib/elements/dom-bind.js

@@ -14,7 +14,7 @@ import { OptionalMutableData } from '../mixins/mutable-data.js';
 import { GestureEventListeners } from '../mixins/gesture-event-listeners.js';
 import { strictTemplatePolicy } from '../utils/settings.js';
 import { wrap } from '../utils/wrap.js';
-import { legacyOptimizations } from '../utils/settings.js';
+import { hideElementsGlobally } from '../utils/hide-template-controls.js';
 
 /**
  * @constructor
@@ -76,7 +76,7 @@ export class DomBind extends domBindBase {
    * @return {void}
    */
   connectedCallback() {
-    if (!legacyOptimizations) {
+    if (!hideElementsGlobally()) {
       this.style.display = 'none';
     }
     this.render();

lib/elements/dom-if.js

@@ -15,7 +15,7 @@ import { enqueueDebouncer, flush } from '../utils/flush.js';
 import { microTask } from '../utils/async.js';
 import { root } from '../utils/path.js';
 import { wrap } from '../utils/wrap.js';
-import { legacyOptimizations } from '../utils/settings.js';
+import { hideElementsGlobally } from '../utils/hide-template-controls.js';
 
 /**
  * The `<dom-if>` element will stamp a light-dom `<template>` child when
@@ -135,7 +135,7 @@ export class DomIf extends PolymerElement {
    */
   connectedCallback() {
     super.connectedCallback();
-    if (!legacyOptimizations) {
+    if (!hideElementsGlobally()) {
       this.style.display = 'none';
     }
     if (this.if) {

lib/elements/dom-repeat.js

@@ -16,7 +16,7 @@ import { OptionalMutableData } from '../mixins/mutable-data.js';
 import { matches, translate } from '../utils/path.js';
 import { timeOut, microTask } from '../utils/async.js';
 import { wrap } from '../utils/wrap.js';
-import { legacyOptimizations } from '../utils/settings.js';
+import { hideElementsGlobally } from '../utils/hide-template-controls.js';
 
 /**
  * @constructor
@@ -321,7 +321,7 @@ export class DomRepeat extends domRepeatBase {
    */
   connectedCallback() {
     super.connectedCallback();
-    if (!legacyOptimizations) {
+    if (!hideElementsGlobally()) {
       this.style.display = 'none';
     }
     // only perform attachment if the element was previously detached.

lib/utils/hide-template-controls.js

@@ -0,0 +1,36 @@
+/**
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+/**
+ * @fileoverview
+ *
+ * Module to hide `<dom-bind>`, `<dom-if>`, and `<dom-repeat>` elements
+ * optimally in ShadyDOM
+ */
+
+import {legacyOptimizations, useShadow} from './settings.js';
+
+let elementsHidden = false;
+
+/**
+ * @return {boolean} True if elements will be hidden globally
+ */
+export function hideElementsGlobally() {
+  if (legacyOptimizations && !useShadow) {
+    if (!elementsHidden) {
+      elementsHidden = true;
+      const style = document.createElement('style');
+      style.textContent = 'dom-bind,dom-if,dom-repeat{display:none;}';
+      document.head.appendChild(style);
+    }
+    return true;
+  }
+  return false;
+}