@Mystara
Not tested, only with my brain, so just idea.
Get all the DOMs which has textContent.
const els = document.querySelectorAll('*')
for (let i = 0; i < els.length; i++) {
const el = els[i]
const children = el.childNodes
let hasText = false
for (let j = children.length; j--) {
if (children[j].nodeType === 3 && children[j].nodeValue.trim().length) {
hasText = true
break
}
}
if (hasText) {
//This element has text content
}
}
If it and its ancestors don’t have a background, apply your solution.
// assume that already know target element
let withoutBackground = true
let node = targetElement
while (node.parentElement) { // until document
const styles = window.getComputedStyle(node)
if (styles.backgroundColor === 'transparent' || ... ) { // Maybe backgroundImage should be checked too.
// node has no background, so check the parent
node = node.parentElement
} else {
withoutBackground = false
break
}
}
if (withoutBackground) {
// the target element has no its own background. So you can apply your solution.
}
To improve : a caching strategy for a once checked node to skip would be better.)
However, I’m not too fond of this approach,
getComputedStyle is very expensive
Rather, it would be better to propose a theme style guide as MagicMirror’s default coding rules.