domReady

[charbelrami]

In version 0.5

domReady: function() {
  this.fs = parseInt(window.getComputedStyle(this).height, 10) + 'px';
}

returns the height value of the element.

Without domReady in version 0.9, it returns NaN (height: auto) because the element has not been rendered yet.

Is there any alternative to domReady?

Thanks

[kevinpschaaf]

DOM measurement should be performed in attached.

It is incorrect to perform DOM measurement in ready, since there is no guarantee that the element is actually in the DOM (e.g. document.createElement('your-element')). The 0.5 domReady did not have this guarantee either (and this is one of the reasons it was removed).

[charbelrami]

Thanks. I have tried attached, but it also returns NaN.

In 0.5:

<polymer-element name="math-brack" attributes="l r">
  <template>
    <span class="math-font-x-light" style="font-size: {{fs}}">{{l}}</span>
    <content></content>
    <span class="math-font-x-light" style="font-size: {{fs}}">{{r}}</span>
  </template>
  <script>
    Polymer({
      l: '(',
      r: ')',
      domReady: function () {
        this.fs = parseInt(window.getComputedStyle(this).height, 10) + 'px';
      }
    });
  </script>
</polymer-element>

It works here: http://charbelrami.github.io/math-elements/
The size of the bracket changes according to the container size.

In 0.9:

<dom-module id="math-brack">
  <template>
    <span class="math-font-x-light" style$="{{fs}}">{{l}}</span>
    <content></content>
    <span class="math-font-x-light" style$="{{fs}}">{{r}}</span>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'math-brack',
    properties: {
      l: {
        type: String,
        value: '('
      },
      r: {
        type: String,
        value: ')'
      }
    },
    attached: function() {
      this.fs = 'font-size: ' + parseInt(window.getComputedStyle(this).height, 10) + 'px';
    }
  });
</script>

It does not work.