Element Selection (Polymer 1.0)
I am working on porting to Polymer 1.0
Here's my template:
<template>
<div class="scroll">
<div class="content">
<content></content>
</div>
<div class="bar barY"></div>
</div>
</template>
The content is filled with text in the main html file.
I need to get the scroll height of this div. I used to do:
height = $(this.shadowRoot).find('.content')[0].scrollHeight;
But this doesn't work anymore:
Uncaught TypeError: Cannot read property 'scrollHeight' of undefined
I tried to add id to the div and select it like this:
height = this.$.content.scrollHeight;
But this gives me a value of 0, although there is a lot of text in the content.
I am calling this code from within a function ready
.
Am I choosing the right item?
source to share
<content>
does not actually contain the content of the component, rather it provides an insertion point for that content to be siblings in the element <content>
. To get the elements inserted for a given <content>
node, you can use the following:
var content = Polymer.dom(this.root).querySelector('content');
var distributed = Polymer.dom(content).getDistributedNodes()
Documentation for the above can be found at https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#dom-api-examples along with a more complete example.
source to share