After reading this Gil Fink’s post, I wanted to set context mode in StencilJS in order to determine whether the application is loaded on a Windows Phone, Android, iOS, or a Desktop the same way ionic framework does.

Stencil’s configuration file allows us to set a globalScript property. This must be a path to a TypeScript file.

The scope of this code has access to the Context object. So we can check our browser’s User Agent in order to set context mode:

In our example, our component will have a stylesheet per mode:

This stylesheet will add a platform-specific message:

Despite the example is quite simple, that’s the same formula ionic framework is using to make platform-specific web components.

Click here to see a full working example. Try browsing with different devices or using Chrome’s device toolbar to play with it.

You can see the full source code on my github repo.