BUG: goto (scroll to selected element) broken when no-shadow enabled #82
Description
Working example:
<!DOCTYPE html>
<html lang="en">
<head>
<script
type="module"
src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js"
></script>
</head>
<body>
<zero-md
src="https://raw.githubusercontent.com/zerodevx/zero-md/master/README.md"
></zero-md>
</body>
</html>Broken example
The difference is that no-shadow is provided to the <zero-md> element.
<!DOCTYPE html>
<html lang="en">
<head>
<script
type="module"
src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js"
></script>
</head>
<body>
<zero-md
src="https://raw.githubusercontent.com/zerodevx/zero-md/master/README.md"
no-shadow
></zero-md>
</body>
</html>Expected behaviour:
go to https://URL#basic-usage. Page should scroll to that heading.
Actual behaviour
console error:
Uncaught TypeError: this.root.getElementById is not a function
goto index.js:153
t index.js:66
setTimeout handler*t/< index.js:66
promise callback*t index.js:66
<anonymous> index.js:330
index.js:153:27Environment
I am using Firefox.
Code
The problem is with the goto function.
Lines 151 to 158 in 5a627f2
this.root does not have getElementById if no-shadow is true. this.root is set in the constructor() function:
Line 55 in 5a627f2
The issue appears to be because getElementById is only defined on the document object. See MDN web docs.