CSS style element is with group properties as Object

addLineNumbersOnPrismCodeHighlighting.js

;(() => {
	// Add class .line-numbers to pre/code for Line Numbers
	const codeElememts = document.querySelectorAll(
		"[class*='language-']:not(.line-numbers)"
	)
	codeElememts.forEach((el, i) => el.classList.add('line-numbers'))
	if (Prism.plugins && Prism.plugins.autoloader)
		Prism.plugins.autoloader.languages_path =
			'//cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/'
})()

createDisqusThreadPostFooter.js

;(() => {
	// Creates element #disqus_thread and load Disqus script
	let d = document,
		el = d.querySelector('#site-main .post-full')

	if (el) {
		const disqusThread = d.createElement('footer'),
			s = d.createElement('script')
		disqusThread.setAttribute('id', 'disqus_thread')
		el.appendChild(disqusThread)
		s.src = '//hariantoatworkblog.disqus.com/embed.js'
		s.setAttribute('data-timestamp', +new Date())
		disqusThread && (d.head || d.body).appendChild(s)
	}
})()

loadScripts.js

const loadScripts = scripts => {
	const loadScript = url =>
		fetch(url)
			.then(response => response.text())
			.then(text => eval(text))
			.catch(console.error.bind(console, 'FAIL: loadScript'))

	const promises = scripts => {
		const list = []
		scripts.forEach(i => list.push(loadScript(i)))
		return list
	}

	return Promise.all(promises(scripts))
		.then(values => values.forEach(script => eval(script)))
		.catch(console.error.bind(console, 'FAIL: Promise.all'))
}

PageIndex.js

;(() => {
	class PageIndex extends HTMLElement {
		constructor() {
			// Always call super first in constructor
			super()

			const d = document,
				options = () => {
					const attr = {}
					for (let { name, value } of this.attributes) {
						attr[name] = value
					}
					return attr
				},
				rootEl = () => {
					const t = d.documentElement || d.body.parentNode
					return t && typeof t.scrollTop == 'number' ? t : d.body
				},
				setStyle = (el, style) => {
					for (let [key, value] of Object.entries(style)) {
						el.style[key] = value
					}
				},
				pushState = scrollTop => {
					const pageIndex = { scrollTop: scrollTop || rootEl().scrollTop }
					history.pushState({ pageIndex }, d.title)
				},
				getOffsetScrollTop = (el, relativeEl) =>
					el.getBoundingClientRect().top -
					(relativeEl || d.body).getBoundingClientRect().top -
					(options().offset
						? options().offset
						: d.querySelector('.site-header .outer')
						? d.querySelector('.site-header .outer').getBoundingClientRect()
								.height
						: 0)

			// Events
			const onDOMContentLoaded = event => {
				const { element } = options()
				if (!element) return
				this.classList.add('page-index')

				const headers = d
					.querySelector(element)
					.querySelectorAll('h1, h2, h3, h4, h5, h6')

				const ul = this.appendChild(d.createElement('ul'))
				ul.classList.add('page-index__list')
				Array.from(headers).forEach(el => {
					let li = ul.appendChild(d.createElement('li')),
						a = li.appendChild(d.createElement('a'))
					li.classList.add('page-index__list-item')
					if (el.id) a.href = `#${el.id}`
					a.innerHTML = el.innerHTML
					a.title = el.innerText
					a.classList.add(`page-index--${el.tagName}`)
					a.$el = el
				})

				ul.addEventListener('click', event => {
					event.preventDefault()
					const { target } = event
					console.log({ target, closest: target.closest('a') })
					const a = target.closest('a')
					pushState(getOffsetScrollTop(a.$el))
					rootEl().scrollTop = getOffsetScrollTop(a.$el)

					a.$el.classList.add('page-index--visited')
				})
			}
			const onPopstate = event => {
				const { state } = event
				state &&
					state.pageIndex &&
					(rootEl().scrollTop = state.pageIndex.scrollTop)
			}

			window.addEventListener('DOMContentLoaded', onDOMContentLoaded)
			window.addEventListener('popstate', onPopstate)

			// Init
			history.replaceState(
				{ pageIndex: { scrollTop: rootEl().scrollTop } },
				d.title
			)
		}
	}

	// Define the new element
	customElements.define('page-index', PageIndex)
	console.log('PageIndex - loaded')
})()

setStyle.js

const setStyle = (el, style) => {
  for (let [key, value] of Object.entries(style)) {
    el.style[key] = value
  }
}