Why is the .getComputedTextLength() not working?

Community Help
4

There’s a difference between d3.selectAll() and container.selectAll(). The former works like document.querySelectorAll(), in which case any elements to be matched have to be attached to the document (the DOM), i.e. be children of it.
The latter queries the children of container. Example:

html`<div>
  <p>first</p>
  <p>second</p>
</div>`.querySelectorAll('p')

selects all p elements that are children of the outermost element (the div).

Regarding getComputedTextLength(): As a rule of thumb, whenever a DOM method has computed in its name, it requires the browser to first draw the element in order to figure out the final size/shape/etc. And for that, the element has to be attached to the DOM.

Fun fact: DOM elements have a property isConnected that tells you if the element is attached to the DOM. Here’s a little experiment for you to try, consisting of two cells:

mutable connected = null

{
  const element = html`<p>I'm connected!`;
  mutable connected = element.isConnected;
  await Promises.delay(1000);
  yield element;
  mutable connected = element.isConnected;  
}
1 Like