Evaluate the continued support for embedding read along XML directly as a child of the read-along component #431
Description
Editor and XML parsing
The functionality is currently implemented in the Editor component. But it needs to repair the XML document after it was parsed. This is a consequence of parsing the XML document with an HTML5 parser. In HTML, the <body /> element can only appear once and it must be a child of <html />. The parser removes all references to the <body /> element from the RAS XML tree. Also, in HTML, element attributes are converted to lower-case which converts the ARPABET attribute to arpabet. Both of these are corrected in the Editor to maintain RAS's adherence to the DTD.
I've investigated and attempted to use XML namespaces to isolate the RAS document from the HTML parser:
<read-along xmlns:ras="...">
<text>
<body> ... </body>
</text>
</read-along>
In theory, and in a pure XML implementation, this would identify <text /> and <body /> as belonging to the "ras" namespace. This does not work with the HTML parser.
Web Component
The web component also supports this embedding implementation, but has a small bug. It uses a DOM query (querySelector()) to determine if the XML document is embedded or not. This occurs in Stencil's componentWillLoad life-cycle event, which seems to fire before the DOM is fully loaded (i.e. the querySelector fails and the href fallback is used). Slowing down the execution of the script (by adding break points), "fixes" the issue.
An potential approach for fixing this timing issue: componentWillLoad does support returning a promise which pauses the first render() event.
<read-along /> component vs <read-along /> XML root element
There are no example embedded files or documentation describing the file structure. One sensible approach would be to embed the root element of the XML document inside the web component:
<read-along audio="...." version="1.5.2">
<read-along version="1.2">
<meta name="generator" content="@readalongs/studio (cli) 1.2.1" id="meta0" />
...
</read-along>
<span slot="read-along-header">...</span>
<span slot="read-along-subheader">...</span>
</read-along>
Since the web component is associated with the read-along element tag, the read along web component gets created twice. Again XML namespaces would help here.