incorrect childNodes for element after running document.execCommand("formatblock", false, "h1");

[Emad Eid]

example showing the issue
http://jsbin.com/nikekogeqe/4/edit

<polymer-element name="custom-element" noscript>
    <template>
        <!-- formatblock(h1) does not work under the polyfill -->
        <div id="wrapper">
            <content></content>
        </div>
        <!-- formatblock(h1) works under the polyfill -->
        <!--<content></content>-->
    </template>
</polymer-element>

<custom-element id="myCustomElement" contenteditable="true">
    <p>test</p>
</custom-element>

After creating and selecting a range that includes the myCustomElement and executing something like

document.executeCommand("formatblock", isIE ? "

" : "h1");

Calling innerHtml on the myCustomElement returns

<p></p> 

but the element is rendered correctly.

calling invalidateShadowRenderer(); after executing the command

fixes the innerHtml, but the element is not rendered correctly.

[AJ Ortega]

execCommand isn't supported with the shadowDom polyfill. We're happy to look at a PR that adds support, however.

[Emad Eid]

Started looking into the issues. First the range api needs to work with the polyfill shadow dom. created a PR to make sure the range works reasonably well under the shadow dom polyfill. I say reasonably well, because the shadow dom can have multiple insertion points. Once the shadow dom (oldest and youngest) have multiple insertion points, things do not even make sense what should be the range. Tried to make sense of chrome native implementation and I could not understand the complete logic. With what the users see and the limitation of the range has to be contiguous in the dom tree, the multiple insertion point might be impossible to implement with the browser editing range api.

At least with the PR one insertion point works well. Even if you have oldest and youngest shadow root associated with the host.

[jfrazzano]

you ever solve this out? We beeb using polymer for 18 months, wanted to try a bunch of native stuff while we wait and lightly test the newer configs, etc. We are trying to get a template repeat working. I sorta had it going last month but then the generator stopped working. I saw it was deprecated. Now we are just trying to get a render of a shadow, without an insertion, something declarative. We can see it on screen no problem in a codePen, when we inspect, and its holder is fine. We were thinking about running a data stream from the url/uri of a object element. That would seem to meet one of the render criteria.

Thanks for any assistance up frony. I know you guys are all swamped.

[Michel Rasschaert]

any news on this front ? We are hit by this issue too.

[Tim van der Lippe]

Thanks for the issue. It has been a great while since this issue was opened. Sadly, this issue misses a live reproduction with the most recent version of the webcomponents polyfill for us to be able to debug and potentially fix. Versions 1 of the polyfills fix a large amount of issues, probably including this one as well.

Please see the CONTRIBUTING.md for guidelines on filing issues. You can start from this jsBin template as a starting point and link it in the issue template under "Live Demo".

Feel free to file a new issue following these instructions if you can still reproduce this issue with versions 1 of the polyfills. Thank you!