Once you've created a header and footer you may be wondering how run javascript on it's contents.
Headers and Footers are isolated from the rest of the page in order to prevent styling conflicts. This is done using the Shadow DOM. This means a normal method of querying/modifying a DOM node won't work.
Don't worry though, all that's need is a minor modification.
Example without Shadow DOM
Let's say we wanted to add a click event handler to a button in our header. Without a shadow DOM we would do it like this.
header.html
<header>
<button type="button" id="headerButton">Click Me!</button>
</header>
javascript.js
function run() {
// Find the button.
var button = document.querySelector("#headerButton");
if (button) {
// Best to always check the your item was found. Otherwise you might crash the page.
button.addEventListener("click", function (e) {
alert("Button was clicked!");
});
}
}
// Make sure the page HTML is fully loaded.
if (document.readyState !== "loading") {
run();
} else {
document.addEventListener("DOMContentLoaded", run);
}
Why doesn't this work?
document.querySelector will not find any element because your button has been rendered inside of a shadow DOM. Let's see an example of how to make this work.
Working Example with Shadow DOM
header.html
Same as above.
javascript.js
function run() {
// Get access to the root of the header.
// THIS IS THE CHANGE
var themeHeader = document.querySelector("#themeHeader").shadowRoot;
// Find the button.
var button = themeHeader.querySelector("#headerButton");
if (button) {
// Best to always check the your item was found. Otherwise you might crash the page.
button.addEventListener("click", function (e) {
alert("Button was clicked!");
});
}
}
// Make sure the page HTML is fully loaded.
if (document.readyState !== "loading") {
run();
} else {
document.addEventListener("DOMContentLoaded", run);
}
All that was needed as a change was querying the shadow root of the header.
Improvements in 2020.014
Starting in release/2020.014 vanilla provides a convenience function to make this a bit easier.
The previous working example could be rewritten like this.
onVanillaReady(function() {
var themeHeader = document.querySelector("#themeHeader").shadowRoot;
// Find the button.
var button = themeHeader.querySelector("#headerButton");
if (button) {
// Best to always check the your item was found. Otherwise you might crash the page.
button.addEventListener("click", function (e) {
alert("Button was clicked!");
});
}
})