Join GitHub today
incorrect childNodes for element after running document.execCommand("formatblock", false, "h1"); #212
example showing the issue
<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
but the element is rendered correctly.
calling invalidateShadowRenderer(); after executing the command
fixes the innerHtml, but the element is not rendered correctly.
referenced this issue
Mar 16, 2015
added a commit
Mar 17, 2015
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.
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.
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.
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!