The New Polaris WC

Polaris is built using the latest web technology primitive, Custom Elements, which you can learn more about in an article by Eric Bidelman. By utilizing Custom Elements, we've made the implementation of the new Polaris much simpler for third parties to implement without an iframe and with a total payload under 20kb. As browsers implement customElements natively the new Polaris will become even faster. Currently Chrome and Safari 10.1 have customElements v1 implemented with Firefox actively developing. If you need more information or want to contribute to the project, reach out to us in slack #polaris.

Browser Support

Polaris supports IE11, Chrome, Edge, Safari, Firefox, Opera mobile Chrome and mobile Safari. Support typically includes the lastest two releases of a browser, as the newest browsers auto update.

Please be aware that has recently dropped support for IE10 and below and we recommend your team also works on a timeline to drop support. If you still need to support those browsers, you'll need to use the legacy Polaris. Lastly, legacy Polaris will be ended at the end of 2017.


Polaris has been fully tested by the Accessibility team at Comcast and has 0 open issues. :-)


Add Polaris to your site with a the script block below.

  document.write('\x3Cscript src="' + (window.customElements ? 'wc' : 'es5') + '.js" async>\x3C/script>');
    xc-header { display: block; min-height: 44px; background: #000; }

We use to do server side detecting by checking user agent string to see if the browser supported customElements, however, we learned that CDN can't cache the thousands of user agent strings that exist. So we've switched to the client checking for customElements and selecting the correct version of Polaris to load. If you find Polaris not working correctly in any browser or your site please let us know in slack #polaris.

NOTE: We are moving away from a single script tag that determines polyfills server-side. Server-side detection on the earlier polaris.js file will still be supported until all users are implementing the above method of including Polaris.

After adding the above code, you simply add the new tags to your site. If you don't have a clientId, create one that represents your site!


Your site code goes here..


How Polaris Authenticates

Polaris is a web component and can be completely controlled by the client. Authentication can be accomplished with one of two attributes being added to <xc-header> tag outlined below. By default polaris will do nothing and show the signed out state. You must add one of the two attributes below with is-authed being strongly preferred.


You have full control over the auth state of polaris by adding the is-auth attribute. When present, Polaris will try to log the user in with CIMA via an iframe and then make additional calls to get user display name, notifications and email count.


With the auto-auth attribute set, Polaris will check for an isAuth=1 cookie on to determine if the user is logged in with CIMA. If both are true, Polaris will log the user in with CIMA and perform the same actions outlined above.


With the enable-in-home-auth attribute set, Polaris will check to see if the user is in-home and authenticate.

IE11 Corp Laptops and Auth Gotcha

IE11 with certain privacy settings will not transfer the cookies needed to authenticate with CIMA in an iframe (happens on corporate laptops). For this reason, auto-auth may not work. Hopefully you are using the is-authed...

How Polaris Shares Data to the Client

When Polaris gets data inside the orchestration iframe, it makes it available to the parent application through a few basic methods.

We will fire a custom event on window, called polaris-data-changed. This event will contain the data received by the api. event.detail.type contains the type of data, where event.detail.response is the response from the api)

We will also add an attribute to <xc-header> (currently polaris-data-user and polaris-data-notifications) to signal that the data is now contained in <xc-header>. Once this attribute is available, you can access this data as shown in the following code example (example would be when polaris-data-user attribute is available):

var header = document.querySelector('xc-header');
var userdata =;
var notificationsdata =;

Creating Notifications and Toasts

Custom notifications and toasts can be added by using the addNotification and addToast methods available on the <xc-header> element.

var header = document.querySelector('xc-header');

    dismissable: true,
    id: 'UNIQUE_ID',
    main: 'Notification Title Goes Here',
    maxViews: 10,
    url: ''

    dismissable: true,
    links: [{
        text: '',
        url: '',
        id: '',
        message: '',
        data: {},
        target: '_blank'
    main: 'Toast Title Goes Here',
    sub: 'Subtitle Goes Here',
    maxViews: 5

Additional Usage

The header has additional attributes that you can use to customize it. Each of the attributes can be set in markup or via javascript using setAttribute or setting the value directly. Additionally you can get information from Polaris such as isAuthed or firstName.

var header = document.querySelector('xc-header');
header.setAttribute('width', 1240);
header.width = 1240;

header.setAttribute('email-count', 150);
header.emailCount = 150;

var firstName = header.firstName;
var isAuthed = header.isAuthed;
//sign user out
header.isAuthed = false;

The following attributes are available on xc-header. xc-footer only has clientId, hide-panels, and width.

Hides signin/signout section. Can still show notifications if auto-auth or is-authed is still enabled.
Makes polaris try to determine users authenticated state and perform auth as outlined in authentication section.
A required unique identifier for your site. This is primarily used for tracking. (This is NOT the cima client id.) Please add to both header and footer!
Prevents polaris from loading its controller iframe which gets user information, notifications, email count, etc.
Prevents polaris from calling YHM for email count.
Polaris includes a skip-navigation link for accessibility. If you include your own skip link for accessibility, feel free to disable the one in Polaris.
Set the number of unread emails.
With the enable-in-home-auth attribute set, Polaris will check to see if the user is in-home and authenticate. If successfully in-home authed, any APIs will have filtered results.
Allows Polaris to call notifications API.
Users first name
Shows "simple footer". (Originally called simplefooter. <xc-footer> only)
Users current authed status
This must be set via javascript. See the `Show Notifications` demo and source code if you want to add your own notifications. This will eventually become more of an api like header.notifications.add({MY NOTIFICATION});
Set by orchestration layer, indicates two-way communication is ready.
Sets the url when a user clicks signin
Sets the url when a user clicks signout
Shows "simple header".
Shows "slim nav" with Xfinity and Comcast Business links.
string: ['authenticated', 'recognized', 'unrecognized']
Users not signed in are considered recognized if they are on the Comcast network, otherwise they are unrecognized.
['myxfinity', 'shop', 'support', 'myaccount', 'tv', 'email', 'home', 'internet', 'voice']
Sets the selected tab on polaris
Sets the max-width of Polaris.