From 3cbdd4683a53bb2b9d8a0c3c706b0fa7e98af359 Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Wed, 4 May 2022 10:14:56 +0100 Subject: [PATCH] remove autoshadowroot --- docs/_guide/rendering.md | 34 ++++++++++--- docs/_guide/your-first-component.md | 4 +- src/auto-shadow-root.ts | 11 ----- src/core.ts | 2 - src/index.ts | 1 - test/auto-shadow-root.ts | 77 ----------------------------- test/controller.ts | 25 ---------- 7 files changed, 29 insertions(+), 125 deletions(-) delete mode 100644 src/auto-shadow-root.ts delete mode 100644 test/auto-shadow-root.ts diff --git a/docs/_guide/rendering.md b/docs/_guide/rendering.md index c380a92f..69bcd601 100644 --- a/docs/_guide/rendering.md +++ b/docs/_guide/rendering.md @@ -11,15 +11,15 @@ Remember to _always_ make your JavaScript progressively enhanced, where possible By leveraging the native [`ShadowDOM`](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) feature, Catalyst components can render complex sub-trees, fully encapsulated from the rest of the page. -Catalyst will automatically look for elements that match the `template[data-shadowroot]` selector, within your controller. If it finds one as a direct-child of your controller, it will use that to create a shadowRoot. +[Actions]({{ site.baseurl }}/guide/actions) and [Targets]({{ site.baseurl }}/guide/targets) all work within an elements ShadowRoot. -Catalyst Controllers will search for a direct child of `template[data-shadowroot]` and load its contents as the `shadowRoot` of the element. [Actions]({{ site.baseurl }}/guide/actions) and [Targets]({{ site.baseurl }}/guide/targets) all work within an elements ShadowRoot. +You can also leverage the [declarative shadow DOM](https://web.dev/declarative-shadow-dom/) and render a template inline to your HTML, which will automatically be attached (this may require a polyfill for browsers which are yet to support this feature). ### Example ```html -