How to use the @ephox/sugar.Attr.set function in @ephox/sugar

if (!isSandbox) {
        Attr.set(frameComponent.element(), 'src', 'javascript:\'\'');
        // IE 6-11 doesn't support data uris on iframeComponents
        // and Edge only supports upto ~4000 chars in data uris
        // so I guess they will have to be less secure since we can't sandbox on those
        // TODO: Use sandbox if future versions of IE/Edge supports iframeComponents with data: uris.
        const doc = frameComponent.element().dom().contentWindow.document;

        doc.open();
        doc.write(html);
        doc.close();

      } else {
        // TINY-3769: We need to use srcdoc here, instead of src with a data URI, otherwise browsers won't retain the Origin.
        // See https://bugs.chromium.org/p/chromium/issues/detail?id=58999#c11
        Attr.set(frameComponent.element(), 'srcdoc', html);
      }
      cachedValue.set(html);
    }
  };

setValue: (frameComponent: AlloyComponent, html: string) => {

      if (!isSandbox) {
        Attr.set(frameComponent.element(), 'src', 'javascript:\'\'');
        // IE 6-11 doesn't support data uris on iframeComponents
        // and Edge only supports upto ~4000 chars in data uris
        // so I guess they will have to be less secure since we can't sandbox on those
        // TODO: Use sandbox if future versions of IE/Edge supports iframeComponents with data: uris.
        const doc = frameComponent.element().dom().contentWindow.document;

        doc.open();
        doc.write(html);
        doc.close();

      } else {
        // TINY-3769: We need to use srcdoc here, instead of src with a data URI, otherwise browsers won't retain the Origin.
        // See https://bugs.chromium.org/p/chromium/issues/detail?id=58999#c11
        Attr.set(frameComponent.element(), 'srcdoc', html);
      }
      cachedValue.set(html);

return function (element) {
      const styles = Attr.get(element, 'style');
      const backup = styles === undefined ? 'no-styles' : styles.trim();
      if (backup === clobberStyle) {
        return;
      } else {
        Attr.set(element, attr, backup);
        Attr.set(element, 'style', clobberStyle);
      }
    };
  };

return function (element) {
      const styles = Attr.get(element, 'style');
      const backup = styles === undefined ? 'no-styles' : styles.trim();
      if (backup === clobberStyle) {
        return;
      } else {
        Attr.set(element, attr, backup);
        Attr.set(element, 'style', clobberStyle);
      }
    };
  };

const makeAnnotation = (eDoc: Document, { uid = Id.generate('mce-annotation'), ...data }, annotationName: string, decorate: Decorator): Element => {
  const master = Element.fromTag('span', eDoc);
  Class.add(master, Markings.annotation());
  Attr.set(master, `${Markings.dataAnnotationId()}`, uid);
  Attr.set(master, `${Markings.dataAnnotation()}`, annotationName);

  const { attributes = { }, classes = [ ] } = decorate(uid, data);
  Attr.setAll(master, attributes);
  Classes.add(master, classes);
  return master;
};

const updateSrc = (anyInSystem: AlloyComponent, url: string): Promise> => {
    const img = Element.fromTag('img');
    Attr.set(img, 'src', url);
    return loadImage(img.dom()).then(() => {
      return memContainer.getOpt(anyInSystem).map((panel) => {
        const aImg = GuiFactory.external({
          element: img
        });

        Replacing.replaceAt(panel, 1, Option.some(aImg));

        const lastViewRect = viewRectState.get();
        const viewRect = {
          x: 0,
          y: 0,
          w: img.dom().naturalWidth,
          h: img.dom().naturalHeight
        };
        viewRectState.set(viewRect);

Arr.each(clobberedEls, function (element) {
    const restore = Attr.get(element, attr);
    if (restore !== 'no-styles') {
      Attr.set(element, 'style', restore);
    } else {
      Attr.remove(element, 'style');
    }
    Attr.remove(element, attr);
  });
};

return FutureResult.nu((resolve) => {
    const script = Element.fromTag('script');

    Attr.set(script, 'referrerpolicy', 'origin');

    Attr.set(script, 'src', url);
    const onLoad = DomEvent.bind(script, 'load', () => {
      onLoad.unbind();
      onError.unbind();
      resolve(Result.value(url));
    });
    const onError = DomEvent.bind(script, 'error', () => {
      onLoad.unbind();
      onError.unbind();
      resolve(Result.error(new Error('Failed to load script: ' + url)));
    });
    Insert.append(Body.body(), script);
  });
};