kreo

const range = (min, max) => (min - max) * Math.random() + max;

class Particle {
  constructor(x, y, canvas) {
    this.setPhysics();
    this.setDimensions();
    this.setGraphics();
    this.x = x;
    this.y = y;
    this.canvas = canvas;

kreo

/**
 * Recursive depth-first search to find all shadow roots within a webpage.
 *
 * Example usage: let's imagine you come across a page that has a bunch of
 * expandable information sections, and you would like to expand all of those
 * info sections for the sake of printing to a PDF or for the ease of
 * performing a simple `CTRL+F` search across the information. Let's assume
 * those expanding buttons are buried within Shadow DOM. (Perhaps the site is
 * using Angular or something of the sort & the buttons are separate
 * components, thus by default they end up in a Shadow DOM whenever included.)

kreo

/**
 * Example usage:
 * const hotspots = findAllDeep(element, `[slot*="hotspot"]`, 10);
 */
const findAllDeep = (parent, selectors, depth = null) => {
  let nodes = new Set();
  let currentDepth = 1;
  const recordResult = (nodesArray) => {
    for (const node of nodesArray) {
      nodes.add(node)

kreo

Install Homebrew:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install jEnv using Homebrew:

brew install jenv

Add the cask-versions tap to Homebrew:

kreo

@use 'sass:math';
@mixin _flex-gap($gap, $row: true) {
  $margin: math.div($gap, 2);
  $transform: -$margin;
  @if $row {
    margin-left: $transform;
    margin-right: $transform;
  } @else {
    margin-top: $transform;
    margin-bottom: $transform;

kreo

/**
 * Returns current active element, including shadow dom
 *
 * @return element or null
 */
export function getNativeFocused(documentRef: Document): Element | null {
    if (!documentRef.activeElement || !documentRef.activeElement.shadowRoot) {
        return documentRef.activeElement;
    }

kreo

import { h, hydrate } from 'preact';

let C = 0;
export function Root({ href, data, children }) {
  let json = data && JSON.stringify(data);
  let id = 'root:'+++C;
  return [
    h(`!--${id}--`),
    children,
    h('component-root', { href, id },

kreo

/**
 * Usage:
 * class FancyButton extends HTMLElement {
 *   constructor() {
 *     super();
 *     ensureShadowRoot(el);
 *     // if a declarative shadow root was present, it'll be here:
 *     console.log(this.shadowRoot);
 *   }
 * }

kreo

if (!Element.prototype.getInnerHTML) {
  Element.prototype.getInnerHTML = function(opts) {
    var html = this.innerHTML;
    if (!opts || !opts.includeShadowRoots) return html;
    var m = new (self.WeakMap || Map)();
    for (var c of (opts.closedRoots || [])) m.set(c.host, c);
    var p = [];
    function walk(node) {
      var c, shadow = node.shadowRoot || m.get(node);
      if (shadow) p.push(node.innerHTML, `<template shadowroot="${shadow.mode}">${shadow.innerHTML}</template>`);

kreo

My stencil + storybook setup

1. Setup your stencil project as usual
2. Add storybook: npx -p @storybook/cli sb init --type react (we use react so you can use JSX inside your stories)
3. Add required deps: npm add @babel/plugin-syntax-import-meta @open-wc/webpack-import-meta-loader webpack-merge -D
4. preview.js:

import { defineCustomElements } from "../dist/esm/loader";