Polyfill without <noscript>

Hi, is ist somehow possible to use this polyfill without adding a <noscript> wrapper?

[oyeharry]

I was having a similar issue while integrating this polyfill with React. However, I was able to solve the issue by doing the following. It works well on SSR and CSR with React 16.8.x and should work with 17.x.x too. Thank you for the beautiful polyfill.

import React, { useEffect, useRef } from 'react';
import ReadDOMServer from 'react-dom/server';
import loadingAttributePolyfillApi from 'loading-attribute-polyfill';

export function LoadingAttrPolyfill(props) {
  const { children } = props;
  const staticMarkup = ReadDOMServer.renderToStaticMarkup(children);
  const noScriptRef = useRef(null);

  useEffect(() => {
    if (noScriptRef.current) {
      loadingAttributePolyfillApi.prepareElement(noScriptRef.current);
    }
  }, []);

  return <noscript ref={noScriptRef} dangerouslySetInnerHTML={{ __html: staticMarkup }} />;
}

export default function ImageCarousel() {
  return (
    <div>
      <LoadingAttrPolyfill>
        <img src='https://picsum.photos/200/300' alt='Random 1' />
      </LoadingAttrPolyfill>
      <LoadingAttrPolyfill>
        <picture>
          <source
            width='846'
            height='480'
            srcset='https://picsum.photos/846/480'
            media='(min-width: 768px)'
          />
          <img width='375' height='250' src='https://picsum.photos/375/250' alt='Random 2' />
        </picture>
      </LoadingAttrPolyfill>
    </div>
  );
}

[oyeharry]

@mfranzke Exactly. I will open a PR soon for this update. Thanks!