Re: [WICG/webcomponents] Adding support for ShadowDOM features in SVG (#942)

I presume it is a sh*load of Namespace issues.

It looks like Vue has a ApplyNS function; no experience with it.

I have faked "slots" with:

```javascript
<div>
  <svg>
    <circle cx="50%" cy="50%" r="35%" fill="yellow" slot="content"></circle>
    <circle cx="50%" cy="50%" r="15%" fill="green" slot="content"></circle>
  </svg>
</div>
<script>
  const host = document.querySelector('div');
  const root = host.attachShadow({mode:'open'});
  root.innerHTML = `
  <svg viewBox="0 0 100 100">
    <rect width="100%" height="100%" fill="blue"/>
    <slot name="content"/>
  </svg>`;
  root.querySelectorAll('slot').forEach(shadowSlot => {
    let slotFragment = new DocumentFragment();
    slotFragment.append(...host.querySelectorAll('[slot]'));
    shadowSlot.replaceWith(slotFragment);
  });
</script>
```

See: https://jsfiddle.net/WebComponents/d7xp5noq/

But since it **moves** lightDOM content it certainly is not a Polyfill.

For Web Component **users** that ``<svg>`` in lightDOM to get the Namespace correct is a biggie.

In the [&lt;pie-chart> Web Component I did for Dev.to](https://dev.to/dannyengelman/what-web-technologies-are-required-to-draw-a-pie-chart-in-2021-spoiler-alert-a-standard-web-component-will-do-1j56)
 I went with **Unknown Elements** in ligthDOM:

```html
<pie-chart>
  <slice size="90" stroke="green">HTML</slice>
  <slice size="1" stroke="red">JavaScript</slice>
  <slice size="9" stroke="blue">CSS</slice>
</pie-chart>
```

This is code end-users understand;
but requires a bit more code in the Web Component to convert it to proper SVG.



-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/942#issuecomment-923068188