Expand `prefer-dom-node-text-content` against `.innerHTML` or implement `no-inner-html` rule

[darkred]

My suggestion is to either expand the prefer-dom-node-text-content rule (source) to also enforce .textContent over .innerHTML, or implement a new no-inner-html rule.

The motive for this is mainly because, in extension development such of Refined GitHub, the use innerHTML should always be avoided, otherwise it becomes flagged by the extension stores.

This came up in this PR comment https://github.com/sindresorhus/refined-github/pull/4520#discussion_r659362368 As described in the comment above, such a rule, no-inner-html, is already implemented in the eslint-plugin-lwc plugin. However, that rule disallows the use of 'innerHTML' in ALL its forms. This includes innerHTML, outputHTML and insertAdjacentHTML

Concluding, I was wondering whether it could be beneficial for XO, to either expand the existing prefer-dom-node-text-content rule against innerHTML, or incorporate that rule no-inner-html as a whole.

Fail

foo.innerHTML = '🦄';
// and maybe also
foo.outerHTML = '🦄';
foo.insertAdjacentHTML = '🦄';

Pass

foo.textContent = '🦄';

[sindresorhus]

Maybe we could make a more general no-unsafe-dom rule.

For example, with Trusted Types, .innerHTML is not dangerous.

Alternatively, a prefer-trusted-types rule.

[fregante]

Related developments: https://web.dev/sanitizer/

❌ el.innerHTML = html;
✅ el.setHTML(html)