Skip to content

Instantly share code, notes, and snippets.

View StefanNieuwenhuis's full-sized avatar
:bowtie:
Follow me on twitter @stefannhs

stefannhs StefanNieuwenhuis

:bowtie:
Follow me on twitter @stefannhs
View GitHub Profile
  • Computer Futures Meetup: ​Taming huge enterprise applications with Mono Repositories, Design Systems & Web Components NOV 21, 2019, AMSTERDAM, NL
  • GhentJs: ​Bringing consistency to enterprise applications with Web Components OCT 9 2019, GHENT, BE
  • Bol.com meetup: ​Taming huge Angular applications at bol.com JUN 26 2019, UTRECHT, NL
  • ING Lunchpiration: ​Taming huge enterprise applications with Mono Repositories, Design Systems & Web Components MAY 14 2019, AMSTERDAM, NL
  • COMMERCE.TALK: ​The art of building framework independent design systems APR 4 2019, BERLIN, DE
  • AngularNL: ​Micro Frontends & Design Systems, built with Angular and Stencil MAR 8 2019, AMSTERDAM, NL
  • ReactiveConf: ​Building a framework independent component library with StencilJS OCT 29 2018, PRAGUE, CZ
  • Workshop: ​Taming your CSS with ITCSS APR 18 2018, UTRECHT, NL
  • ESRI Dev Summit: ​Angular2 + ESRI JS 4.2 = A World of Endless Possibilities MAR 8 2017, PALM SPRINGS, USA
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>Stencil Component Starter</title>
<script src="/build/mycomponent.js"></script>
</head>
.overlay {
opacity: 0;
visibility: hidden;
position:fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
import { newE2EPage } from '@stencil/core/testing';
describe('my-component', () => {
let page, component, element;
beforeEach(async () => {
page = await newE2EPage();
await page.setContent('<my-component></my-component>');
component = await page.find('my-component');
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop() open = false;
@Prop() transparent = false;
import { newE2EPage } from '@stencil/core/testing';
describe('my-component', () => {
let page, component, element;
beforeEach(async () => {
page = await newE2EPage();
await page.setContent('<my-component></my-component>');
component = await page.find('my-component');
import { Component } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
render() {
return <div class="overlay">
import { newE2EPage } from '@stencil/core/testing';
describe('my-component', () => {
let page, component, element;
beforeEach(async () => {
page = await newE2EPage();
await page.setContent('<my-component></my-component>');
component = await page.find('my-component');
.modal {
display:none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.2);
import { Component } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop({mutable: true}) isActive = false;