undefined | Better HN

0 pointslelanthran2y ago0 comments

I like to think that I didn't reinvent it (just like react, et al didn't reinvent it), I only refined the concept into the simplest form that works :-)

After all, a custom element that takes a front-end newcomer 30m to write is absolutely preferable to a large infrastructure-based standard that, after 22 years, is still not included in the spec.

Look at the options for including HTML fragments in web pages:

1. Complex client-side react/vue/etc,

2. A server language ,

3. A build-step including a non-spec bundler/packer,

4. A `<remote-fragment src="..." />

My point is that webcomponents make quite a lot of complicated things redundant for particular use-cases. As time goes on I see the fat front-end frameworks having more of their functionality being replaced with less complex (to use) custom elements.

(Hence my experiments with value propagation using custom elements)

0 comments

7 comments · 3 top-level

mewpmewp22y ago· 2 in thread

Technically you could also just write a bit of JS within the HTML to do without needing any of the first 3.

You could querySelectorAll and check the src attribute etc, then fetch the content put it in the innerHTML.

    <remote-fragment src="https://..." />

    <script>

      document.querySelectorAll("remote-fragment").forEach(async (el) => {

        const src = el.getAttribute("src");

        const result = await fetch(src).then((res) => res.text());

        el.innerHTML = result;

      });

    </script>

Or if you want to react to any such component inserted at times down the line or src attribute changes, you could use MutationObserver.

lelanthranOP2y ago

That breaks on edge cases.

For example it won't work recursively when a fetched fragment has fragments of its own.

Or when the js snippet loads before some fragment element is loaded (say, from a DOM update).

The nice thing about custom elements is that you get to treat them exactly like normal elements.

mewpmewp22y ago

In this case you could use MutationObserver - although we are doing manually the logic web components provide, but my point is that you can do it also without using web components. My code doesn't include attribute changes, but this should be possible to also do with MutationObserver.

    <body>
    <script>
      const onRemoteFragmentMount = async (el) => {
        const src = el.getAttribute("src");
        const result = await fetch(src).then((res) => res.text());
        el.innerHTML = result;
      };

      const callback = (mutationsList, observer) => {
        for (let mutation of mutationsList) {
          if (mutation.type === "childList") {
            mutation.addedNodes.forEach((node) => {
              if (node.tagName === "REMOTE-FRAGMENT") {
                onRemoteFragmentMount(node);
              }
            });
          }
        }
      };

      const observer = new MutationObserver(callback);
      const bodyElement = document.querySelector("body");
      observer.observe(bodyElement, {
        childList: true,
        subtree: true,
      });
    </script>

    <remote-fragment src="..." />
    </body>

1 more reply

nesarkvechnep2y ago· 2 in thread

Refined the concept into the simplest form that works… as long as you have JavaScript enabled.

lelanthranOP2y ago

What's the alternative other than simply doing without this feature?

Quekid52y ago

E.g. Apache's Server Side Includes[0] allows for

   <!--#include virtual="/footer.html" -->

Tbf, you did specify 'server language' in a post further up the comment chain, but the the thing is that it doesn't have to be much more complicated that SSI -- assuming it's available for your deployment target, of course.

(SSI obviously does not require JavaScript.)

[0] https://httpd.apache.org/docs/current/howto/ssi.html

1 more reply

dannye2y ago

why waste 28 minutes writing your own component? copy/paste takes 2 minutes https://dev.to/dannyengelman/load-file-web-component-add-ext...

j / k navigate · click thread line to collapse

0 comments

7 comments · 3 top-level

mewpmewp22y ago· 2 in thread

Technically you could also just write a bit of JS within the HTML to do without needing any of the first 3.

You could querySelectorAll and check the src attribute etc, then fetch the content put it in the innerHTML.

    <remote-fragment src="https://..." />

    <script>

      document.querySelectorAll("remote-fragment").forEach(async (el) => {

        const src = el.getAttribute("src");

        const result = await fetch(src).then((res) => res.text());

        el.innerHTML = result;

      });

    </script>

Or if you want to react to any such component inserted at times down the line or src attribute changes, you could use MutationObserver.

lelanthranOP2y ago

That breaks on edge cases.

For example it won't work recursively when a fetched fragment has fragments of its own.

Or when the js snippet loads before some fragment element is loaded (say, from a DOM update).

The nice thing about custom elements is that you get to treat them exactly like normal elements.

mewpmewp22y ago

    <body>
    <script>
      const onRemoteFragmentMount = async (el) => {
        const src = el.getAttribute("src");
        const result = await fetch(src).then((res) => res.text());
        el.innerHTML = result;
      };

      const callback = (mutationsList, observer) => {
        for (let mutation of mutationsList) {
          if (mutation.type === "childList") {
            mutation.addedNodes.forEach((node) => {
              if (node.tagName === "REMOTE-FRAGMENT") {
                onRemoteFragmentMount(node);
              }
            });
          }
        }
      };

      const observer = new MutationObserver(callback);
      const bodyElement = document.querySelector("body");
      observer.observe(bodyElement, {
        childList: true,
        subtree: true,
      });
    </script>

    <remote-fragment src="..." />
    </body>

1 more reply

nesarkvechnep2y ago· 2 in thread

Refined the concept into the simplest form that works… as long as you have JavaScript enabled.

lelanthranOP2y ago

What's the alternative other than simply doing without this feature?

Quekid52y ago

E.g. Apache's Server Side Includes[0] allows for

   <!--#include virtual="/footer.html" -->

(SSI obviously does not require JavaScript.)

[0] https://httpd.apache.org/docs/current/howto/ssi.html

1 more reply

dannye2y ago

why waste 28 minutes writing your own component? copy/paste takes 2 minutes https://dev.to/dannyengelman/load-file-web-component-add-ext...

j / k navigate · click thread line to collapse