[Markdown] [Web/API] Fix live samples which use heading IDs that are not derived from heading text

[wbamberg]

Part of #7898.

In MDN live samples pass an ID to identify where Yari should look for the code blocks to include. This ID should always be a heading ID, in Markdown. Also in Markdown, the heading ID is always derived from the heading text - it doesn't have an independent existence.

But in HTML the heading ID does have an independent existence, so can be different from the one that would be generated from the heading text. If a heading has such an ID in our HTML, and a live sample uses it, then that live sample will break when we convert to Markdown.

I believe that this issue affects the following pages:

https://developer.mozilla.org/en-US/docs/Web/API/canvas_api/tutorial/applying_styles_and_colors
https://developer.mozilla.org/en-US/docs/Web/API/canvas_api/tutorial/compositing
https://developer.mozilla.org/en-US/docs/Web/API/css_object_model/using_dynamic_styling_information
https://developer.mozilla.org/en-US/docs/Web/API/css_painting_api/guide
https://developer.mozilla.org/en-US/docs/Web/API/datatransferitemlist
https://developer.mozilla.org/en-US/docs/Web/API/datatransferitemlist/length
https://developer.mozilla.org/en-US/docs/Web/API/document_object_model/introduction
https://developer.mozilla.org/en-US/docs/Web/API/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces
https://developer.mozilla.org/en-US/docs/Web/API/document_object_model/whitespace
https://developer.mozilla.org/en-US/docs/Web/API/element/queryselector
https://developer.mozilla.org/en-US/docs/Web/API/eventtarget/addeventlistener
https://developer.mozilla.org/en-US/docs/Web/API/globaleventhandlers/onselectionchange
https://developer.mozilla.org/en-US/docs/Web/API/htmlelement/focus
https://developer.mozilla.org/en-US/docs/Web/API/navigator/canshare
https://developer.mozilla.org/en-US/docs/Web/API/settimeout
https://developer.mozilla.org/en-US/docs/Web/API/webglrenderingcontext