b-fuze / deno-dom

Browser DOM & HTML parser in Deno
https://jsr.io/@b-fuze/deno-dom
MIT License
412 stars 48 forks source link

Error on template.content.cloneNode(true) #145

Closed timonson closed 11 months ago

timonson commented 11 months ago

Hello,

I would like to clone the HTMLTemplateElement contents and get the following error although it is valid JavaScript.

      const template = doc.createElement("template");
      template.innerHTML = getMetaTags(input);
      head.appendChild(template.content.cloneNode(true));

error: TS2339 [ERROR]: Property 'content' does not exist on type 'Element'. head.appendChild(template.content.cloneNode(true));

Why is this happening and is there a workaround?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#javascript

Thank you!

b-fuze commented 11 months ago

That TypeScript error can be resolved like this:

import { ..., HTMLTemplateElement } from "https://deno.land/x/deno_dom/deno-dom-wasm.ts";
// ...
const template = doc.createElement("template") as HTMLTemplateElement;

as for the Javascript error that occurs when you run .content.cloneNode(...) I just pushed a fix for it in bbb4f93

timonson commented 11 months ago

Thank you!

Importing from master seems to work, but importing the module from the url with the commit throws this:

export {
  DOMParser,
  Element,
  type HTMLDocument,
  HTMLTemplateElement,
} from "https://raw.githubusercontent.com/b-fuze/deno-dom/bbb4f93727e22d7686076c0887aba920d9085e7e/deno-dom-wasm.ts";

error: Module not found "https://raw.githubusercontent.com/b-fuze/deno-dom/bbb4f93727e22d7686076c0887aba920d9085e7e/src/dom/selectors/sizzle.js". at https://raw.githubusercontent.com/b-fuze/deno-dom/bbb4f93727e22d7686076c0887aba920d9085e7e/src/dom/selectors/sizzle-types.ts:1:20

b-fuze commented 11 months ago

@timonson it's in the latest published version v0.1.40

import {
  DOMParser,
  Element,
  type HTMLDocument,
  HTMLTemplateElement,
} from "https://deno.land/x/deno_dom@v0.1.40/deno-dom-wasm.ts";

const doc = new DOMParser().parseFromString("<template>foo bar</template>", "text/html")!;
const frag = doc.querySelector("template")! as HTMLTemplateElement;
console.log(frag.content.cloneNode().nodeName);

you don't need to use Github

b-fuze commented 11 months ago

Closing this as the relevant bug in Deno DOM was fixed in v0.1.40