From 5aca52720a9207eea557f5513e84d9425132c042 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 3 Mar 2024 19:51:44 +0100 Subject: [PATCH 1/3] docs: Improve no-child-traversal-in-connectedcallback --- docs/rules/no-child-traversal-in-connectedcallback.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/rules/no-child-traversal-in-connectedcallback.md b/docs/rules/no-child-traversal-in-connectedcallback.md index aea6244..3afd3b2 100644 --- a/docs/rules/no-child-traversal-in-connectedcallback.md +++ b/docs/rules/no-child-traversal-in-connectedcallback.md @@ -31,7 +31,7 @@ class FooBarElement extends HTMLElement { if (button) { button.disabled = true } - }).observe(this) + }).observe(this, {childList: true}) } } ``` @@ -52,3 +52,5 @@ class FooBarElement extends HTMLElement { ## When Not To Use It If you are comfortable with the edge cases of DOM traversal directly in the `connectedCallback` then you can disable this rule. + +It may also be necessary to disable the rule when the custom element is appended to the DOM via JavaScript like for instance the Vue framework, which appends the element including all children at once and a `MutationObserver` would not receive any `childList` mutations in such cases. \ No newline at end of file From 6577f2d2b0ebcdb9962e5f520ef3e06f4a17d5ba Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 6 Mar 2024 01:16:10 +0100 Subject: [PATCH 2/3] Update docs/rules/no-child-traversal-in-connectedcallback.md --- docs/rules/no-child-traversal-in-connectedcallback.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/rules/no-child-traversal-in-connectedcallback.md b/docs/rules/no-child-traversal-in-connectedcallback.md index 3afd3b2..f1db19e 100644 --- a/docs/rules/no-child-traversal-in-connectedcallback.md +++ b/docs/rules/no-child-traversal-in-connectedcallback.md @@ -53,4 +53,4 @@ class FooBarElement extends HTMLElement { If you are comfortable with the edge cases of DOM traversal directly in the `connectedCallback` then you can disable this rule. -It may also be necessary to disable the rule when the custom element is appended to the DOM via JavaScript like for instance the Vue framework, which appends the element including all children at once and a `MutationObserver` would not receive any `childList` mutations in such cases. \ No newline at end of file +If your element is appended to the DOM via `.innerHTML` or similar methods, you may need to disable this rule because in such a case, the children are are available during `connectedCallback` and no mutations events will fire. \ No newline at end of file From 5631c8dbd8d6e969336ea40f2d3b9c435900c8ad Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 6 Mar 2024 01:16:41 +0100 Subject: [PATCH 3/3] Update docs/rules/no-child-traversal-in-connectedcallback.md --- docs/rules/no-child-traversal-in-connectedcallback.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/rules/no-child-traversal-in-connectedcallback.md b/docs/rules/no-child-traversal-in-connectedcallback.md index f1db19e..9c3ebd7 100644 --- a/docs/rules/no-child-traversal-in-connectedcallback.md +++ b/docs/rules/no-child-traversal-in-connectedcallback.md @@ -53,4 +53,4 @@ class FooBarElement extends HTMLElement { If you are comfortable with the edge cases of DOM traversal directly in the `connectedCallback` then you can disable this rule. -If your element is appended to the DOM via `.innerHTML` or similar methods, you may need to disable this rule because in such a case, the children are are available during `connectedCallback` and no mutations events will fire. \ No newline at end of file +If your element is appended to the DOM via `.innerHTML` or similar methods, you should disable this rule because in such a case, the children are are available during `connectedCallback` and no mutations events will fire. \ No newline at end of file