[svgwg] Issue: <foreignObject> and <svg:use> marked as Agenda+

dirkschulze has just labeled an issue for https://github.com/w3c/svgwg as "Agenda+":

== <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.

See https://github.com/w3c/svgwg/issues/511

Received on Wednesday, 7 November 2018 06:12:57 UTC