Cannot read property 'parentNode' of null error in Polymer 2

Hi Nathan, thank you for the great tool which works pretty good in HTML files. However when I tried it in a Polymer 2 element I mocked-up, I couldn’t get it work and keep encountering the error of Cannot read property 'parentNode' of null.

I tried to put code

Split(['#column-tag-list', '#column-repo-list', '#column-repo-page'], {
	sizes: [25,25,50],
	minSize: [300, 300, 960],
	gutterSize: 5
});

anywhere but the parentNode of null keeps showing up.

I guess it’s due to Split() could not find the nodes neither their parent before the shadow DOM are ready, therefore, I put the Split([]) code in the ready(){} method of the definition class as the following, it didn’t work neither.

Please help on how to use it in Polymer 2 properly. Thanks!

<dom-module id="pol-app">
	<template>
		<style>
			...
		</style>
		<div class="app-container">
			<div id="column-tag-list" class="column">
				...
			</div>
			<div id="column-repo-list" class="column">
				...
			</div>
			<div id="column-repo-page" class="column">
				...
			</div>
		</div>
	</template>
	<script src="../../bower_components/Split.js/split.min.js"></script>
	<script>
		class PolApp extends Polymer.Element {
			static get is() { return 'pol-app'; }
			static get properties() {
				return {
					...
				};
			}
			...
			constructor() {
				super();
				this.rootPattern = (new URL(this.rootPath)).pathname;
			}

			ready() {
				console.log('Hi Split.');
				Split(['#column-tag-list', '#column-repo-list', '#column-repo-page'], {
					sizes: [25,25,50],
					minSize: [300, 300, 960],
					gutterSize: 5
				});
			}
			...
		}

		window.customElements.define(PolApp.is, PolApp);
	</script>
</dom-module>

[skyjia]

This could work.

ready() {
  super.ready();
  const that = this;
  
  ...

  setTimeout(function () {
    Split(
      [
        that.shadowRoot.querySelector('#column1'),
        that.shadowRoot.querySelector('#column2'),
        that.shadowRoot.querySelector('#column3')
      ],
      options);
  }.bind(this), 0);
}

The ready callback, for one-time initialization, signals the creation of the element’s shadow DOM. In the case of class-based elements, you need to call super.ready() before accessing the shadow tree.

To check the initial distribution, use setTimeout or requestAnimationFrame from ready. The callback should fire after initial distribution is complete.

https://www.polymer-project.org/2.0/docs/upgrade#callback-contracts-have-changed https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

[wanghailei]

@nathancahill I tried window.document.querySelector('#column-tag-list'), and it didn’t work.

@skyjia that.shadowRoot.querySelector('#column1') works. And the setTimeout() is necessary when used Split() in Polymer 2.

Thanks, guys!