如何在Polymer Element（Polymer 2.0）中實現此代碼

Question

當前，我正在嘗試將此JavaScript代碼放入Polymer元素中，但是由於錯誤“未捕獲的TypeError：無法讀取null的屬性'offsetHeight'”，它始終會失敗。

JavaScript代碼：

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);

});

PS：對不起，我的英語不好

Answer 1

嘗試為與選擇器，應用程序標題和.bg-header匹配的元素提供一個ID。 假設#appHeader和#bgHeader。 並且，像這樣訪問屬性offsetHeight。

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

基於類的元素應使用本機DOM API而不是Polymer.dom API。 傳統元素可以選擇使用本機API。

參考。 https://www.polymer-project.org/2.0/docs/upgrade#polymer-dom-apis