擴展 <object> 在達特

Question

Dart <object>元素不支持使用getter訪問<object>.contentDocument ，因此我考慮過擴展對象以添加功能。

我看了一下ObjectElement的實現，基本上我需要添加以下ObjectElement行：

 @DomName('HTMLObjectElement.contentDocument')
 @DocsEditable()
 Document get contentDocument => _blink.BlinkHTMLObjectElement.instance.contentDocument_Getter_(this);

但是，我不知道該怎么做。 我目前使用的解決方案是使用代理，該代理將所有調用重定向到基礎JsObject但是老實說，這不僅骯臟，而且無法維護。

/ *更新以解釋萬惡之源* /

啟動我正在從事的項目時，我想在網站上顯示由用戶上傳的SVG，並讓用戶通過插入其他SvgElement或刪除其他SVG來操縱這些SVG。

以字符串形式下載SVG並通過以下方式顯示它們時

container.append(new SvgElement(svgCode))

我遇到了非常奇怪的顯示錯誤，例如，SVG中嵌入的圖像被移位甚至刪除，還有其他帶有蒙版的錯誤。

通過使用<object>標記並將其data屬性設置為SVG的URL，可以解決該問題。 SVG呈現正確。 話雖這么說，另一個問題出現了。 我無法訪問和操作SVG DOM，因為它位於<object>標記內，並且無法使用contentDocument訪問該標記的文檔。

考慮到所有這些因素后，只剩下兩個選擇：

1. 我使用<object>標記但沒有顯示錯誤，但無法操縱SVG或
2. 我從SVG的源創建了新的SvgElement，並將它們附加到DOM，這使我可以操作SVG，但會顯示錯誤。

由於存在顯示錯誤並不是真正的解決方案，因此我只能利用第一個選項，即使用<object>標記並使用Javascript來訪問對象的contentDocument。

如您所見，訪問contentDocument並不總是一個安全問題，並且不允許使用它，這只是一個問題的quick and dirty解決方案。

當使用JsObject訪問contentDocument ，我得到的是JsObject，而不是Element。 因此，我不僅不必在任何地方都更新我的代碼，而且由於必須將JsObject與callMethod(blabla)一起使用，這也變得很丑陋。

Answer 1

class MyObjectElement extends ObjectElement {
  static bool _isRegistered = false;

  static register() {
    if (!_isRegistered) {
      document.registerElement('my-object', MyObjectElement,
          extendsTag: 'object');
      _isRegistered = true;
    }
  }

  factory MyObjectElement() {
    var result = document.createElement('object', 'my-object');
    return result;
  }

  MyObjectElement.created() : super.created();

  js.JsObject get contentDocument {
    // doesn't seem to work with a custom element.
    return new js.JsObject.fromBrowserObject(this)['contentDocument'];
  }
}

用起來像

MyObjectElement.register（）; var obj = new MyObjectElement（）..data =“ https://www.suntico.com/wp-content/uploads/DemoStampRotate01-e1400242575670.png ”; document.body.append（OBJ）;