Ariel Salminen arielsalminen

Some of you who have followed our previous design systems adventures on Twitter might know that both me (Viljami) and Nick Williams, our newest Frontend Developer, have a long experience working with Stencil and Web Components. So you naturally might wonder why are we migrating away from Stencil?

Please note that this isn’t meant to be an advice against Stencil. Stencil has its place in the ecosystem, and depending on your company’s needs it can still be an amazing tool. Heck, I even wrote an article praising the tool a couple years back. With Nord Design System, it mainly came down to these reasons:

For developers Stencil is a bit of a “black box” in certain cases and it often requires a lot of digging via the source code to understand specifically why something works like it does. We prefer trans

	/*
	* Clamp util.
	*/
	const clamp = (val, min, max) => {
	return Math.min(Math.max(val, min), max)
	}

	export default clamp

	/* eslint-disable no-undef */
	;(function (window, document) {
	"use strict"

	/**
	* The Nord Documentation object
	*
	* @constructor
	*/
	function NordDocs() {

	//
	// Figma project stats
	// Pulls statistics like number of files, frames, versions etc for a project.
	//
	// Usage:
	// export FIGMA_API_ACCESS_TOKEN='your-token'
	// node figma-project-stats.js <project-id>
	//
	// You can generate tokens in your account settings or at
	// https://www.figma.com/developers/explorer#personal-access-token

	/* ---------------------------------------------
	/ RESET STYLES
	/ --------------------------------------------- */

	html,body,div,span,h1,h2,h3,h4,h5,p,blockquote,
	pre,a,code,img,svg,small,strike,strong,sub,sup,
	b,u,i,ol,ul,li,form,label,table,caption,tbody,
	tfoot,thead,tr,th,td,main,article,aside,canvas,
	input,footer,header,nav,section,time,button,
	video,textarea,input {

	function onOpen(e) {
	SlidesApp.getUi()
	.createMenu("Custom Fonts")
	.addItem("Georgia", "formatText")
	.addToUi();
	}

	function formatText() {
	var selection = SlidesApp.getActivePresentation().getSelection();
	if (selection) {

	---
	permalink: search.json
	eleventyExcludeFromCollections: true
	---

	{"search" : [
	{%- for page in collections.all %}
	{
	"url" : "{{ page.url }}",
	"title" : "{% if page.data.title %}{{ page.data.title }}{% else %}Nord Design System{%- endif -%}",

	/**
	* This function binds properties and events to a custom element and returns the event.
	* It can be used in the react "ref" attribute like this:
	* ```<custom-element ref={ duetRef({ prop1: 'a' }, { event: () => this.handleEvent() }) }></custom-element>```
	* The above example is a one time binding for properties and will not update automatically.
	* If you need updates on properties you'll have to save element references and update them manually:
	* ```<custom-element ref={ el => { this.element = duetRef({ prop1: 'a' }, { event: () => this.handleEvent() })(el); }></custom-element>```
	* using this reference you can update prop1: ```this.element.prop1 = 'b';```.
	*
	* @param {*} properties The properties to bind to a custom element.

	{
	"devDependencies": {
	"@stencil/angular-output-target": "latest",
	"@stencil/react-output-target": "latest"
	}
	}

	body:not(.user-is-tabbing) *:focus {
	outline: none;
	}