tomhodgins

Vanilla DOM Toolkit

Creating Elements

• document.createElement('')
• with properties: Object.assign(document.createElement(''), {})
• defining custom elements in HTML: customElements.define('my-tag', class extends HTMLElement {})

Working with Element Contents

tomhodgins

Ways to extend a language with custom stuff that works™

• define stuff in the language to use (libraries)
• if the language lets you define custom parts of syntax (macros, plugins, etc) use the built-in methods for extending the language itself
• create an entirely separate DSL for working with solutions in this problem space and figure out how that maps to this language

Ways to extend a language with custom stuff that doesn't work™

• try to add additional syntax as a thin layer on top of a separate, growing language still under development

tomhodgins

const extractCustomProperties = (string = '') => Object.fromEntries(
  Array.from(
    string.matchAll(/--(?<property>[^:]+?)\s*:\s*(?<value>.*?)\s*[;}]/gus),
    ([match, property, value]) => [property, value]
  )
)

const css = `
  :root {
    --custom: property;

tomhodgins

(async () => console.log(
  (await import(`data:text/javascript,export default "Is this a safe way to eval?"`)).default
))()

tomhodgins

`template string`

tagged`template string`

tagged('template', 'string')`with arguments before`

tagged`template string`('with', 'arguments', 'after')

tomhodgins

class CustomElement extends HTMLElement {
  constructor() {
    super()

    this.shadow = this.attachShadow({mode: 'open'})
    this.stylesheet = `
      :host,
      :host * {
        box-sizing: border-box;
        text-rendering: optimizeLegibility;

tomhodgins

// ==UserScript==
// @name         CSS Overlay 2 | Ace Edition
// @namespace    overlay
// @version      1.0
// @description  For writing CSS stylesheets
// @author       Tommy Hodgins
// @match      *://*/*
// ==/UserScript==

if (document.querySelector('link[href^="https://fonts.googleapis.com/css?family="][href*="IBM+Plex+Mono"]') === null) {

tomhodgins

// We can create a new empty HTML document
const htmlDocument = document.implementation.createHTMLDocument()

// And we can find the XML namespace of HTML (http://www.w3.org/1999/xhtml) in the browser too
const xmlns = new DOMParser().parseFromString(
  new XMLSerializer().serializeToString(htmlDocument),
  'text/html'
).documentElement.getAttribute('xmlns')

// Using the namespace for HTML we can create a new XML document in the HTML namespace like this

tomhodgins

import * as parseCSS from 'https://tomhodgins.github.io/parse-css/index.js'
import jsincss from 'https://unpkg.com/jsincss/index.vanilla.js'
import eunit from 'https://unpkg.com/jsincss-element-units/index.vanilla.js'

async function getAllStylesheets() {
  return [...getStyleTags(), ... await getLinkedStylesheets()]
}

function getStyleTags() {
  return Array.from(

tomhodgins

/* input */
a {
  font-size: clamp(10px, 10vw, 100px);
}

/* output */
a {
  font-size: clamp(10px, 10vw, 100px);
}