(() => {
const template = `
`;
customElements.define('outline-inline',
class OutlineButton extends HTMLElement {
#outline = null;
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = template;
this.#outline = this.shadowRoot.querySelector('#outline-inline');
}
connectedCallback() {
if (document.readyState === 'complete') {
this.#render();
}
window.addEventListener('DOMContentLoaded', () => {
this.#render();
});
}
#render() {
const root_selector = this.getAttribute('content-root');
const outline = build_outline(root_selector);
this.#outline.innerHTML = `${outline}
`;
}
}
);
function build_outline(root_selector) {
const root = document.querySelector(root_selector);
const headings = root.querySelectorAll('h1, h2, h3, h4, h5, h6');
const outline = [ ];
for (const heading of headings) {
outline.push(`
${heading.innerText}
`);
}
return outline.join('');
}
})();