[SOLVED] Access Polymer3.0 custom elements from static html

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/webcomponentsjs@2.4.3/webcomponents-loader.js"></script>
 <script type="module" src="http://XXX_MY_NGINX_VIRTUAL_HOST_XXXX/my-custom-element.js"></script>