Element.attachShadow on MathML element

[fred-wang]

See https://dom.spec.whatwg.org/#dom-element-attachshadow

@rwlbuis has a one-line patch to allow MathML elements too and @bkardell was able to use it for https://bkardell.com/blog/MathForward.html

• Do we want that? HTML5 does not allow to attach shadow root on arbitrary elements.
• Is it really necessary when we have Custom MathML elements mathml#138 and w3c/mathml#139 resolved + the css layout API?
• Is there any security issue e.g. with links? ( see https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow and Should all MathML elements really be potential hyperlinks / match :visited? #142 )

[bkardell]

I don't think getting shadows in core is likely to happen too - core should have that as the vision, it's important because a number of steps required to enable us to get there (IDL sorting out, the shape of discussions about things like links, etc) do belong in core. I would suggest this issue itself move to v2.

[fred-wang]

from june 1: level 2

[Jamesernator]

• Is it really necessary when we have Custom MathML elements mathml#138 and w3c/mathml#139 resolved + the css layout API?

It would still be rather useful especially when combined with Custom Math Elements to enable slottable templates.

e.g. one could create say a summation element:

const template = Template.mathML`
  <mrow>
    <munderover>
      <mo part="summationSymbol">Σ</mo>
      <mrow><slot name="lowerBound"></slot></mrow>
      <msub><slot name="upperBound"></slot></mrow>
    </munderover>
    <slot></slot>
  </mrow>
`;

class SummationElement extends MathElement {
  #shadowRoot = this.attachShadow({ mode: "closed "});
  
  constructor() {
    super();
    this.#shadowRoot.append(...template.content.cloneNode(true));
  }
}

customElements.define("sum-", SummationElement, { namespace: MATH_NAMESPACE });

<math>
  <sum->
    <mrow slot="lowerBound">
       <mi>x</mi>
       <mo>=</mo>
       <mn>0</mn>
    </mrow>
    <mn slot="upperBound">10</mn>
    <mrow>
      <mi>x</mi>
      <mo>-</mo>
      <mn>1</mn>
    </mrow>
  </sum->
</math>