search

salesforce / eslint-plugin-lwc

Official ESLint rules for LWC
MIT License
98 stars 32 forks source link

feat: Add no-template-children rule #76

Closed nolanlawson closed 3 years ago

nolanlawson commented 3 years ago

Adds a rule to check for patterns like this.template.firstChild, which is commonly used today in shadow-DOM-using code to check whether the component has rendered yet (e.g. if (!this.template.firstChild) { /* ... */ }), or to retrieve the first element defined in the template HTML.

This will not work in native shadow DOM in certain browsers, as described in the added docs. this.template.querySelector is encouraged as an alternative.

W-9742708

nolanlawson commented 3 years ago

Just occurred to me that we may also want to check for this.firstChild in light DOM templates... That needs some more thought, though, as this is less of a strong signal than this.template.

Ah, also just occurred to me that this.firstChild is fine in light DOM. We'll never insert a <style> into the root of a light DOM component.