Nolan Lawson nolanlawson

nolanlawson / index.html

Created March 1, 2022 20:05

Repro shared constructed stylesheets issue

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>CSSStyleSheet repro</title>
	</head>
	<body>
	<h1>CSSStyleSheet repro</h1>
	<script type="module">
	const template = document.createElement('template');

nolanlawson / index.html

Last active March 21, 2022 15:38

emoji-picker-element with Twemoji

	<!doctype html>
	<html lang=en>
	<head>
	<title>emoji-picker-element: using Twemoji</title>
	</head>
	<body>
	<h1>emoji-picker-element: using Twemoji</h1>
	<p>
	This demo shows how to use emoji-picker-element with Twemoji.
	Note that this carries a performance cost because of 1) using MutationObserver to monitor for DOM changes, and 2) downloading Twemoji images.

nolanlawson / index.html

Last active February 7, 2022 18:18

Constructable stylesheets push vs reassignment

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Constructable styles benchmark: push versus reassignment</title>
	<style>
	label {
	display: block;
	margin: 20px 0;

nolanlawson / .gitignore

Last active January 3, 2022 23:23

repro-axe-jsdom-button-text

node_modules

nolanlawson / index.html

Created January 3, 2022 22:47

repro axe-core shadow button

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Test</title>
	</head>
	<body>
	<main>
	<h1>Test</h1>
	<button id="shadow-button"><div id="shadow-button-inner"></div></button>
	</main>

nolanlawson / .gitignore

Last active December 27, 2021 04:58

repro stacktracey

node_modules

nolanlawson / index.html

Last active December 18, 2022 10:59

emoji-picker element: inserting characters into text input

	<!doctype html>
	<html lang=en>
	<head>
	<title>emoji-picker element: inserting characters into text input</title>
	<style> label, div {
	padding: 10px;
	}
	</style>
	</head>
	<body>

nolanlawson / index.html

Last active November 13, 2021 15:44

emoji-picker-element React example

	<!doctype html>
	<html lang="en">
	<head>
	<title>emoji-picker-element React example</title>
	</head>
	<body>
	<div></div>
	<script type="module">
	import * as React from "https://cdn.skypack.dev/react@^17";
	import * as ReactDOM from "https://cdn.skypack.dev/react-dom@^17";

nolanlawson / index.html

Created November 5, 2021 18:40

Bare ::part(foo) selector

	<!doctype html>
	<html lang=en>
	<head>
	<title>Bare ::part(foo) selector</title>
	</head>
	<body>
	<h1>Bare ::part(foo) selector</h1>
	<custom-component></custom-component>
	<body>
	<script type=module>

nolanlawson / index.html

Created November 3, 2021 14:44

delegatesFocus test

	<!doctype html>
	<html lang=en>
	<head>
	<title>delegatesFocus test</title>
	</head>
	<body>
	<h1>delegatesFocus test</h1>
	<div></div>
	<pre></pre>
	<script>