html5-import | 易学教程

Images created using `document.currentScript.ownerDocument.createElement` (from within <link> imported HTML) never load

阅读更多关于 Images created using `document.currentScript.ownerDocument.createElement` (from within imported HTML) never load

问题 Here's a function that returns the width of an image, given the image's url: async function getImageWidthByUrl(imgUrl) { const imgEl = document.createElement("img"); let untilImgLoaded = new Promise((resolve, reject) => { imgEl.onload = resolve; imgEl.onerror = reject; }); imgEl.src = imgUrl; await untilImgLoaded; return imgEl.naturalWidth; } It works fine. It also (of course) works if we use new Image() instead of document.createElement("img") . However, the document.createElement("img")

Vanilla web-component structure

阅读更多关于 Vanilla web-component structure

I am looking into structuring vanilla web-components. I have previously used Polymer and like the fact that you can have the template, styles and JavaScript in one file for your component. I want to achieve this with 'vanilla' web components if possible but can't work out how. I've taken the code from here and added it to a file which I am using as follows: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Component test</title> <link rel="import" href="x-foo-from-template.html"> </head> <body> <x-foo-from

Vanilla web-component structure

阅读更多关于 Vanilla web-component structure

问题 I am looking into structuring vanilla web-components. I have previously used Polymer and like the fact that you can have the template, styles and JavaScript in one file for your component. I want to achieve this with 'vanilla' web components if possible but can't work out how. I've taken the code from here and added it to a file which I am using as follows: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">