60 replies

1. Benny Powers 🇨🇦️🇮🇱️ 1 min later

   @zachleat "Declarative Shadow DOM"

   1. Zach Leatherman 2 min later

      @bp 😅

      1. Benny Powers 🇨🇦️🇮🇱️ 4 min later

         @zachleat it's in the spec. ff is building it now. 5 line polyfill

         1. Zach Leatherman 5 min later

            @bp it is an option, yeah! Not quite what I mean though

            1. Benny Powers 🇨🇦️🇮🇱️ 1 hr later

               @zachleat Yeah I know, but like... what if we built a generation of tools that *didn't* fight against current and future standards? What if we implemented ideas like HTML progressive enhancement of web components in the way in which *browser authors have recommended*? Wouldn't that be really nice? Wouldn't that let us update our tools and projects much more smoothly in the future? Wouldn't that make it so much easier to transfer knowledge between projects and prevent name conflicts?

               1. Zach Leatherman 1 hr later

                  @bp browser authors aren’t #1 on this list, which is typically what I go by https://www.w3.org/TR/html-design-principles/#priority-of-constituencies

               2. Thomas Broyer 1 hr later

                  @bp @zachleat That doesn't mean DSD is what you need every time: e.g. GitHub's relative-time element, or an element you use to wrap a table that turns it into a sortable/filterable table.
                  DSD won't help here as what you want is only progressively enhancing the light DOM (the elements could use a shadow tree, but a declarative one would buy you nothing)

                  1. Benny Powers 🇨🇦️🇮🇱️ 1 hr later

                     @tbroyer @zachleat dsd would still get you fouc and cls in that case, depending on what's in the shadow root

                     but point taken

         2. Brian LeRoux 💚 21 min later

            @bp @zachleat progressive enhancement means it doesn't need JS to function. Thats the whole point of the technique?

            That polyfill is, for the moment, a deal breaker. We can get into the other dealbreakers after that lands in FF. 😂

            1. Benny Powers 🇨🇦️🇮🇱️ 1 hr later

               @brianleroux @zachleat that's an opinion. GNOME web for example doesn't even *let* you disable javascript globally, because they observed that nobody does.

               A few months of waiting is worth not building a generation of tools which improperly implement spec'd behaviour

               1. Brian LeRoux 💚 1 hr later

                  @bp @zachleat gnome may not let you disable js but it will still fail and then those users will have a terrible experience. It's about professional baselines not blindly implementing specs before they are ubiquitous. Standards based dev is about including everyone not just ppl who got lucky with a page load.

                  1. Benny Powers 🇨🇦️🇮🇱️ 1 hr later

                     @brianleroux @zachleat

                     ```html
                     <c-e>
                     <template shadowrootmode="open">
                     <style>
                     :host:not(:defined) ::slotted(#fallback) { /* 🎉️ */ }
                     </style>
                     </template>
                     <div id="fallback" slot="fallback">
                     <noscript>fallback content</noscript>
                     </div>
                     </c-e>
                     ```

                     season to taste

                     1. Brian LeRoux 💚 1 hr later

                        @bp @zachleat or build a working app that works everywhere always. Can't wait for the DSD to be production ready but this ain't it.

2. Khalid ⚡ 2 min later

   @zachleat Sprinkles?

3. Private reply 3 min later
4. passle 3 min later

   @zachleat MZDVWCTPEFLD is pretty catchy

   1. Zach Leatherman 4 min later

      @passle hahahaha

5. Jason Garber 3 min later

   @zachleat VANSTACK

   1. Zach Leatherman 4 min later

      @jgarber Chris Farley vibes 😂

6. Marijke Luttekes 4 min later

   @zachleat Vanilla DOM?

   Because naming things is hard.

   1. Zach Leatherman 1 hr later

      @mahryekuh I like this one!

7. Matt Stein 5 min later

   @zachleat Cruelty-Free DOMJobbers?

8. Ben Myers 🦖 8 min later

   @zachleat Enhancing from the light side just makes me think of Jedis.

   1. Zach Leatherman 1 hr later

      @ben the Force Quit is strong with this one

9. tbeseda 12 min later

   @zachleat maybe “web component capsule”? as in: they are totally encapsulated.

10. Nathan Knowler 12 min later

    @zachleat Web 0

11. Adam Stoddard 16 min later

    @zachleat custom elements

    1. Zach Leatherman 1 hr later

       @aaadaaam 👀👀👀

12. Jens Grochtdreis 18 min later

    @zachleat WebCLD

    Web Component (for) Light DOM

13. Alistair Davidson 18 min later

    @zachleat Enhancers? "What we need for this is an enhancer" "I'm building an enhancer" "Enhancers are a lightweight alternative to frameworks"

14. Brian LeRoux 💚 22 min later

    @zachleat or at least some education as to why this is the best technique for working with the grain of the web. Making up terms seems to work for a while then fade into confusion.

15. Jim Nielsen 29 min later

    @zachleat yes please! So often I am like “ohhhh, new article about using web components” and then I read and see it’s just an empty “app shell” that generates everything “client side” and I feel cheated

    1. Zach Leatherman 1 hr later

       @jimniels it’s uplifting to hear support for this!

       1. Jim Nielsen 2 hr later

          @zachleat Actually just published something this morning and gave a nod to this toot cause I called what I did "web components" but it's really just a custom element with full markup over the wire which then gets enhanced/added to by the custom element's JS (if its available). Didn't have a word for it so just said "it's a web component”

          https://blog.jim-nielsen.com/2023/web-components-icon-galleries/

          1. Zach Leatherman 2 hr later

             @jimniels ah, great—seems like a vote for “Custom Element,” maybe?

             1. Jim Nielsen 2 hr later

                @zachleat yes, but in many cases what we really mean is ”non-empty custom element”. Or, to your point, "custom elements that enhance light DOM”.

                Maybe I'll call it an “HTML component” — it's the HTML part of web components ha

                1. Zach Leatherman 3 hr later

                   @jimniels I’d sign off to that!

                   1. McNeely 28 days later

                      @zachleat @jimniels late to the conversation since I just read Jim's post but it seems like the important parts of the convention are 1) it's just light DOM 2) it's progressively enhanced HTML. With those two thoughts in mind I think either a name like "Enhanced Components" or "Progressive Tags" might work for classifying the technique.

16. Matt Wilcox 39 min later

    @zachleat If tailwind’s success against all odds is anything to go by we should call them ArseParps.

17. westbrook 42 min later

    @zachleat other than “web components”?

    1. Zach Leatherman 1 hr later

       @westbrook Fair question! Mostly I’d like a classification to help with communication and education.

       1. Hawk Ticehurst 6 hr later

          @zachleat @westbrook I'd give a +1 to having a classification between the two. At this point I think "web components" has (imo) been pretty heavily marketed/discussed as being the *combination* of CEs, shadow dom, templates, and {insert other WIP APIs} whereas I usually call what Zach is describing as "wrapping markup with custom elements to declaratively define interactive UI"

          1. westbrook 6 hr later

             @hawkticehurst @zachleat where so you specifically place the delta between the two?

             1. Hawk Ticehurst 9 hr later

                @westbrook @zachleat In this case I'd say the delta is CEs versus all other WC APIs

                If we formally call what Zach is describing "web components" I worry it risks muddying what that term means. Most docs/resources describe WCs as being the combo of CEs, shadow dom, and templates (+ others) but what Zach is talking about is just using the CE API

                In my mind it's about being precise with wording and also thinking about all the docs/resources that already exist if that makes sense?

                1. Hawk Ticehurst 9 hr later

                   @westbrook @zachleat Also to be clear, I don't think it would be wrong/bad to casually or informally describe this as "web components" but for the purposes of education/docs I think being precise that this a method of building interactive UI using only custom elements and nothing else from the "web component" bucket of APIs is probably a smart move

18. Jed Schmidt 48 min later

    @zachleat Slight DOM Web Components

    1. Zach Leatherman 1 hr later

       @jed don’t you dare slap me with a white glove

       1. Jed Schmidt 1 hr later

          @zachleat not sure about progressive, but if you want unobtrusive and vanilla, how about Jeb!™️ Components?

          1. Zach Leatherman 1 hr later

             @jed …please clap?

19. Chris Armstrong 1 hr later

    @zachleat plug and play

20. Slasher Calavera 🔪💀 2 hr later

    @zachleat ✨ DOMponents ✨

    1. Zach Leatherman 2 hr later

       @ashur we have a winner, pack up your things everyone

21. Dan Ryan 3 hr later

    @zachleat let’s just call them The Way

    Or HTMLements

    1. Zach Leatherman 3 hr later

       @d …h-t-m-elements 😅

22. Philip (is looking for work) 22 days later

    @zachleat Wait, I thought this was just "web components"? Is this not the default usage and anything Shadowy or requiring dependencies it the exception? Who is doing the reverse?

    /cc @jimniels since I found this toot via his icon site blog post

    1. Zach Leatherman 22 days later

       @mez @jimniels as someone that remembers going through this revelation and then seeing it replay a few times now, I think my personal anecdata suggests otherwise

       1. Jim Nielsen 22 days later

          @zachleat @mez yeah I always thought of “web components” as the entire suite of technologies (custom elements, shadow dom, es modules, <slot>, etc.)

          For me personally, I would love to have a term I could use to differentiate between web components that are used in a progressively enhanced way, eg

          <app-drawer>
          <nav>
          <a>…</a>
          <a>…</a>
          </nav>
          <app-drawer>

          Instead of something like:

          <app-drawer></app-drawer>

          With a bunch of JS

          1. Philip (is looking for work) 22 days later

             @jimniels @zachleat Gotcha. I think I was just slow on the uptake so I didn’t get much further than custom elements. I also am not in a spot where I’m building things for public consumption or re-use across different client projects.

23. Zach Leatherman November 9, 2023

    via https://adactio.com/journal/20618

    1. HTML web components
    2. Element extensions (from @davatron5000)

    1. Private reply November 9, 2023