Adding a Polymer element to SharePoint

[Average Joe Developer]

Hi,

I am currently trying to integrate a custom Polymer element into SharePoint 2010 using an HTML Form Web Part.  So basically, this web part lets you enter custom HTML and it will render it.  My plan is to enter only 3 tags in the HTML Form Web Part:

<script src="https://mypolymer.domain.com/components/platform/platform.js"></script>

<link rel="import" href="https://mypolymer.domain.com/my-elements/my-element/my-element.html" />

<my-element width="600px" height="400px">Your browser does not support the my-element tag.</my-element>

The SharePoint server is in one domain:  mysharepoint.domain.com

The Polymer element is in another domain: mypolymer.domain.com

The web server hosting the Polymer element is running IIS 7.5.  And it is using Windows Authentication only.  After configuring the site with the proper response headers to support CORS, I run into an error in polymer.concat.js on line 7706.  It's returning a 401 Unauthorized error on all the CSS files that the core and paper polymer elements use.  When I look at this area of the file, it looks like Polymer is using an XHR to load the CSS files that it needs.  For example, if I were using the core-header-panel I would get a 401 Unauthorized error on the XHR call to load the file mypolymer.domain.com/components/core-header-panel/core-header-panel.css.

.

    xhr: function(url) {

      this.requests++;

      var request = new XMLHttpRequest();

      request.open('GET', url, true);

      request.send();

      request.onerror = request.onload = this.handleXhr.bind(this, request);

      // queue of tasks to run after XHR returns

      request.pending = [];

      request.resolve = function() {

        var pending = request.pending;

        for(var i = 0; i < pending.length; i++) {

          pending[i]();

        }

        request.pending = null;

      };

      // if we have already resolved, pending is null, async call the callback

      request.wait = function(fn) {

        if (request.pending) {

          request.pending.push(fn);

        } else {

          endOfMicrotask(fn);

        }

      };

      return request;

    }

This is fine, but I suspect that this causes the 401 Unauthorized error because the XHR is trying to load the css without the credentials flag specified.  One workaround is for me to also add Anonymous Authentication to the components directory that contains all of the Polymer custom elements, but I would prefer a solution that uses Windows Authentication across the board.

Does anyone have any ideas for solutions other than adding Anonymous Authentication to the polymer components directory?  Is there a way for me to specify that these particular XHRs (in polymer.concat.js, line #7706) need to send credentials to the Polymer web sever?

Thanks!

[axix.s...@gmail.com]

I have also tried to integrate or use sharpeoint CSOM Js on the polymer but no luck.