Search code examples
polymerpolymer-3.x

Access Polymer3.0 custom elements from static html


I created a custom Polymer3.0 element. And it works fine when I do ploymer serve.

We have an internal enterprise NPM registry, to which I published my element.

Now I want to use this element in a completely different project (which has only static HTML/JS) and is served by NGNIX server.

  • Is this possible ? If so how to approach it ?
  • Do I need to server my custom element via node or http-server for me to use in a static html in a completely different project ?
  • Can we server the polymer3.0 elements like CDN, I saw some posts with unpkg, but for that I need to publish to global NPM. R there any other options ?

Solution

  • I was able to solve the issue (in-fact it was me not looking at all the options in polymer.json).

    If anyone is interested following is what I did..

    • In my ploymer.json I added the following
      • shell property of json to point to my custom element js file
      • I also added to the js property, "compile":true..

    Following is what my polymer.json looks like

    ...
    "shell": "xxxxx.js",
    "builds":[
    {
      "name": "prod",
      "preset": "es6-bundled",
      "bundle":true,
      "moduleResolution": "node",
      "addServiceWorker": true,         
      "inlineCss": true,          
      "inlineScripts": true,      
      "rewriteUrlsInTemplates": true, 
      "sourcemaps": true,     
      "stripComments": true,     
      "js": {"minify":true, "compile":true},
      "css": {"minify":true},
      "html":{"minify":true}
    },
    ...
    

    I copied my files in build/ folder to my nginx server and hosted them as regular folder. Of course I add add_header Access-Control-Allow-Origin *; to my conf file

    In my static HTML to import my component all I had to do is

    <script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-loader.js"></script>
     <script type="module" src="http://XXX_MY_NGINX_VIRTUAL_HOST_XXXX/my-custom-element.js"></script>