How to use document.getElementById() ?

[erikdemarco]

From your readme, I see you use shadow dom. But there are some things to consider when using Shadow DOM.

First, elements inside the shadow DOM cannot be referenced in Javascript code as before, using document.getElementById(), document.querySelector() or similar functions, because their root element is not the document element, but the shadow DOM. So instead of document we need to use the object returned by attachShadow() function.

Second, using CSS code that combines elements inside and outside the shadow DOM is tricky. Suppose that we wanted to set the visibility of component with id “r_wfu_textbox_1”, which resides inside the shadow DOM, to ‘hidden’, based on a custom class “hide-filename” of the article element with id “post-261”, which resides outside the shadow DOM.

If we didn’t have a shadow DOM, it would look like this:

article#post-261.hide-filename div#r_wfu_textbox_1 {
  visibility: hidden;
}

However, because of the shadow DOM, the CSS selector article#post-261.hide-filename div#r_wfu_textbox_1 will not work.