calebdwilliams

Form-associated custom elements

Description

The form-associated custom elements APIs enable custom elements to participate in form submission and validation lifecycles.

Links

• Specification
• More capable form controls
• Creating Custom Form Controls with ElementInternals
• Creating a form-associated custom element

calebdwilliams

/** See https://astexplorer.net/#/gist/029b3c40b76e04ceb3dada59d4a4cbab/9e5ee857c583ed6fb1ed05d2bbd934a41eb4156e */
import * as postcss from "postcss";

const rootToRefSelectorMap = new WeakMap();
const exportsString = '._export💲';

function toSassMixin(rule) {
  const mixin = rule.clone();
  mixin.selector = `@mixin ${rule.selector.replace('$', '')}`;
  return mixin;

calebdwilliams

Introduce silent classes

This is an RFC on a proposal to introduce silent classes to CSS. This concept borrows heavily from the abandoned @apply specification while hopefully learning from the places that particular API failed.

The problem

Styles cannot be reused across instances of DocumentOrShadowRoot. While the shadow DOM’s encapsulation is incredibly powerful and enables developers to have full control over portions of the DOM, there are often rules that design system authors might want to reuse across contexts.

While some recent proposals will allow for style sharing across shadow roots (like constructible stylesheets and CSS module scripts), often times the target node type is different (between something like a div and :host`).

calebdwilliams

export function syncAttributesAndProperties(self) {
  self.constructor.observedAttributes.forEach(attribute => {
    const descriptor = Object.getOwnPropertyDescriptor(self.constructor.prototype, attribute);

    Object.defineProperty(self, attribute, {
      get() {
        if (descriptor?.get) {
          return descriptor.get.apply(self, []);;
        }
        return self.getAttribute(attribute);

calebdwilliams

import { LitElement } from 'https://cdn.pika.dev/lit-element@^2.3.1';

/** @typedef {new (...args: any[]) => any} Constructor */

/**
 * @template {!Constructor} T
 * @param {T} superclass - The class to extend
 */
const FormControlMixin = (superclass) => 
  class FormControl extends superclass {

calebdwilliams

import sass from 'node-sass';
import { resolve, extname } from 'path';
import { processString } from 'uglifycss';
import stringToTemplateLiteral from 'string-to-template-literal';
import nodeSassImporter from 'node-sass-package-importer';

const importer = nodeSassImporter();

function transform(css) {
  return `import { css } from 'lit-element';

calebdwilliams

/**
 * This code was adapted from the excellent Braid Design System
 * by SEEK OSS, you can find their original code code here 
 * https://github.com/seek-oss/braid-design-system/blob/master/lib/hooks/typography/basekick.ts
 * 
 * They're doing some really amazing stuff and I got to copy them here,
 * you should definitely check them out.
 */

calebdwilliams

export const updatePath = (obj, path, value) => {
  const paths = path.split('.');
  const location = paths.pop();

  let pointer = obj;
  for (let point in paths) {
    const path = paths[point];
    if (path in pointer) {
      pointer = pointer[path];
    } else {

calebdwilliams

function fetchResource(url, interval = 500, i = 1) {
    let attempts = 0;
    
    return new Promise((resolve, reject) => {
        const repeat = setInterval(() => {
            fetch(url)
                .then(response => {
                    if (response.ok) {
                        resolve(response);
                        clearInterval(repeat);                        

calebdwilliams

const traceProperty = (object, property) => {
  let value = object[property];
  Object.defineProperty(object, property, {
    get () {
      console.trace(`${property} requested`);
      return value;
    },
    set (newValue) {
      console.trace(`setting ${property} to `, newValue);
      value = newValue;