Wie kann ich diesen Code in einem Polymer Element (Polymer 2.0) implementieren?

Question

Derzeit versuche ich diesen JavaScript-Code in mein Polymer-Element zu setzen, aber es scheitert immer an dem Fehler "Uncaught TypeError: Kann Eigenschaft 'offsetHeight' von null nicht lesen ".

JavaScript-Code:

addEventListener('WebComponentsReady', function() { 

var appHeader = document.querySelector('app-header'); 
var bgHeader = document.querySelector('.bg-header'); 
var appHeaderHeight = appHeader.offsetHeight; 
var bgHeaderHeight = bgHeader.offsetHeight; 

var transformBgHeader = function() { 
var y = window.scrollY; 
if (y <= bgHeaderHeight) { 
    y = 1.5 * y; 
} 
var s = bgHeader.style; 
s.transform = s.webkitTransform = 'translate3d(0,' + -y + 'px,0)'; 
appHeader.shadow = y > bgHeaderHeight - appHeaderHeight; 
} 

transformBgHeader(); 

addEventListener('scroll', transformBgHeader); 

}); 

P. S: Sorry für mein schlechtes Englisch

Answer 1

versuchen, eine ID zu den Elementen passenden Selektoren, app-Header und .bg-Header zu geben. Angenommen, #appHeader und #bgHeader. Und greifen Sie wie folgt auf das Attribut offsetHeight zu.

this.$.appHeader.offsetHeight 
this.$.bgHeader.offsetHeight 

Class-based elements should use the native DOM APIs instead of the Polymer.dom APIs. Legacy elements can optionally use the native APIs.

Ref. https://www.polymer-project.org/2.0/docs/upgrade#polymer-dom-apis