Skip to content

Instantly share code, notes, and snippets.

View kreo's full-sized avatar
:electron:
System Failture. Try again🁢

Fabio Cencetti kreo

:electron:
System Failture. Try again🁢
64 followers · 397 following
View GitHub Profile
@kreo
kreo / definition.js
Created November 11, 2024 23:17 — forked from wisniewski94/definition.js
Declarative Shadow DOM Experiment
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
kreo / SearchInTheShadows.js
Created October 8, 2024 09:48 — forked from Spencer-Doak/SearchInTheShadows.js
Recursively find all shadow roots in a page.
/**
* 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
kreo / utils.js
Created October 8, 2024 09:48 — forked from heyMP/utils.js
Recursively find elements through multiple layers of shadow dom.
/**
* 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
kreo / install-java-macos.md
Created June 3, 2024 16:14 — forked from leifericf/install-java-macos.md
Installing Java on macOS and Adding It to jEnv

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
kreo / _polyfill.scss
Created March 13, 2024 08:23 — forked from mashirozx/_polyfill.scss
Flex box gap polyfill with scss mixin
@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
kreo / get-native-focused.ts
Created February 17, 2024 01:17 — forked from MarsiBarsi/get-native-focused.ts
Returns current active element, including shadow dom
/**
* 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
kreo / hydrate-root.js
Created June 3, 2022 06:29 — forked from developit/hydrate-root.js
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
kreo / *ensure-shadow-root.js
Created June 3, 2022 06:28 — forked from developit/*ensure-shadow-root.js
/**
* 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
kreo / getInnerHTML-polyfill.js
Created June 3, 2022 06:26 — forked from developit/getInnerHTML-polyfill.js
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
kreo / stencil-storybook-howto.md
Created May 27, 2022 11:17 — forked from jpzwarte/stencil-storybook-howto.md

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";