1

I have a project in development which will be something like gadget or widget for loading it in other websites. It Won't be an Iframe but when i load it as a widget in other websites there is lot's of CSS conflicts. I searched for solution and find ShadowDOM. I tried it for solving problem! but didn't work!

I appreciate it if you help me for this problem.

<div id="%REACT_APP_ROOT_ID%" data-plugin="%PLUGIN_ID"></div>
    <script>
      const widget = document.getElementById('rcroot');
      widget.attachShadow({ mode: 'open' });
      widget.shadowRoot.innerHTML = widget.innerHTML;
      widget.innerHTML = '';
    </script>
<div>
mahziar.eghdami
  • 113
  • 8
  • can you alter the css to just add id everywhere? Like `#my.widget div{}` `#my-widget .box{}` etc. and use some nasty little `!important` here and there? – Pepo_rasta Jun 30 '21 at 05:59
  • @Pepo_rasta even i do this. there will be also some problems. for example my side-menu will work on all of the document. i mean when i open it, it will open from the parent website. because of that the most secure way is to isolate all of the project. but the question is how can i do that? and thank you for your comment! – mahziar.eghdami Jun 30 '21 at 06:06
  • React and W3C standard Web Components are not Best Friends (due to Reacts (kinda outdated) virtual DOM approach). Search for blogs on what is required so React understand Web Components – Danny '365CSI' Engelman Jun 30 '21 at 07:51

0 Answers0