export custom element in html from org-mode

Question

I'm trying to figure out the simplest possible way to export an html document from org-mode and have it include a working custom-element.

I've tried the following, but it gives me an error message in the console

#+BEGIN_EXPORT html
<script type="module" src="https://raw.githubusercontent.com/PolymerElements/paper-button/master/paper-button.js"></script>
<paper-button raised class="indigo">raised</paper-button>
#+END_EXPORT

browser error message:

Loading module from “https://raw.githubusercontent.com/PolymerElements/paper-button/master/paper-button.js” was blocked because of a disallowed MIME type (“text/plain”).

I took the component from:

https://www.webcomponents.org/introduction

Answer 1

It's a CORS issue, not a problem related to Emacs, org-mode or anything in the editing side.

Modules should be of MIME-type text/javascript or they won't load in any browser implementing the specification.In this case this translates to the fact that you're including a file from raw.githubusercontent.com which will serve text/plain MIME, thus it won't be accepted by browsers.

One possible workaround for this is using an alternative url which will honor the MIME-type as could be jsdelivr.net - There may be others, but I just know this one.

So, using this url as src: https://cdn.jsdelivr.net/gh/PolymerElements/paper-button/paper-button.js

will deliver the file without CORS errors.

This will fix your current issue, but probably there it will be more to do to make the thing work as you pretend.