Полимерный компонент, влияющий на внешний DOM

Question

Я пытаюсь написать полимерный компонент, который повлияет на внешний дом.

<dom-module id="ux-increase-font"> 
    <template> 
    <style> 
     :host { 
     display: inline-block; 
     } 
    </style> 
    <paper-button> 
     <iron-icon icon="arrow-upward"></iron-icon> 
     Increase 
    </paper-button> 
    </template> 

    <script> 
    Polymer({ 
     is: 'ux-increase-font', 
     properties: {}, 
     listeners: { 
     tap: 'increaseFont' 
     }, 
     increaseFont: function() { 
     fontSize = parseInt($('body').css('font-size')); 
     if (fontSize > 10) { 
      $('body').css('font-size', (fontSize + 2) + 'px'); 
     } 
     } 

    }); 
    </script> 
</dom-module> 

Это не работает, и я не уверен, почему. Я включил domtastic на главной странице, поэтому $ должен быть доступен, и он находится в консоли. Но когда я нажимаю на элемент, я получаю $, не определяется, якобы потому, что domtastic недоступен внутри тени DOM виджетов.

Я пытаюсь получить свой торт и съесть его тоже, мне нужна одна копия domtastic, которую я могу вызвать из тени DOM виджета, чтобы манипулировать реальной DOM родительской страницы.

Answer 1

Tomasz был прав, тень DOM не была проблемой. В моем случае не было размером шрифта набора свойств на теле, поэтому я выписал чек, чтобы применить значение по умолчанию в случае, если нет ни уже есть:

<script> 
    Polymer({ 
    is: 'ux-increase-font', 
    properties: {}, 
    listeners: { 
     tap: 'increaseFont' 
    }, 
    increaseFont: function() { 
     fontSize = $('body').css('font-size'); 
     if (!fontSize) { 
     $('body').css('font-size', 14 + 'px'); 
     } 
     else { 
     fontSize = parseInt(fontSize); 
     } 
     if (fontSize > 10) { 
     $('body').css('font-size', fontSize + 2 + 'px'); 
     } 
     console.log(fontSize) 
    } 
    }); 
</script>