[svgwg] <foreignObject> and <svg:use>

emilio has just created a new issue for https://github.com/w3c/svgwg:

== <foreignObject> and <svg:use> ==
All browsers but Gecko restrict `<foreignObject>` in `<svg:use>` elements. I'm considering doing that as well in Gecko.

The reason for this is that allowing `<foreignObject>` allows random HTML elements there as well. Which means we allow custom elements, which means that the shadow tree is exposed, and when implementations recreate them is exposed as well.

For example, the following test-case logs to the console the internal shadow tree elements from the `<use>` element, which Blink, WebKit and Gecko recreate when an attribute changes:

```html
<!doctype html>
<style>
  custom-element {
    display: block;
    width: 100px;
    height: 100px;
    background: green;
  }
  custom-element:defined {
    background: green;
  }
</style>
<svg width="100" height="100">
  <defs>
    <g id="g" width="100" height="100">
      <foreignObject width="100" height="100">
        <custom-element></custom-element>
      </foreignObject>
    </g>
  </defs>
  <use x="0" y="0" width="100" height="100" href="#g"/>
</svg>
<script>
  customElements.define('custom-element', class extends HTMLElement {
    constructor() {
      super();
      console.log("no way");
      let parent = this.parentNode;
      while (parent) {
        console.log(parent);
        parent = parent.parentNode;
      }
    }
  });

  g.setAttribute("foo", "bar");
</script>
```

Note that Blink and WebKit remove after creation the `<foreignObject>` element, so the custom element is still exposed. This is at best unexpected. I'm considering avoiding creating the `<foreignObject>` altogether in Gecko, to avoid exposing the point at which we create / re-construct the shadow tree.

Please view or discuss this issue at https://github.com/w3c/svgwg/issues/511 using your GitHub account

Received on Thursday, 2 August 2018 12:52:57 UTC