html fragment & svg remove xml namespace

html fragment & svg remove xml namespace

https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment

const xmlToSVGConvert = (svgStr = ``) => {
      const xml = /<\?xml[\s\S]*\?>/i;
      let result = ``;
      result = svgStr.replace(xml,``);
      const index = result.indexOf(`>`);
      // svg namespace
      const viewport = `<svg data-uuid="live_map_svg" id="live_map_svg" width="100%" height="100%" viewBox="0 0 1000 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`;
      result = viewport + result.substr(index + 1);
      return result;
};

    xmlToSVGConvert(svgStr) {
      const xml = /<\?xml[\s\S]*\?>/i;
      let result = ``;
      result = svgStr.replace(xml,``);
      const index = result.indexOf(`>`);
      // svg namespace
      const viewport = `<svg data-uuid="live_map_svg" id="live_map_svg" width="100%" height="100%" viewBox="0 0 1000 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`;
      result = viewport + result.substr(index + 1);
      return result;
    },

---

shadow DOM

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot

https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/

https://developers.google.com/web/fundamentals/web-components/shadowdom

demo

https://codepen.io/xgqfrms/pen/vYOxxBK

---