Skip to content

Instantly share code, notes, and snippets.

View tomalec's full-sized avatar

Tomek Wytrębowicz tomalec

62 followers · 7 following
View GitHub Profile
@tomalec
tomalec / gist:5da43f97f64761ecdbf96b07688e8bb3
Created March 9, 2022 16:29
Custom elememnt to be embeded
Hello
<my-element>Custom Elements</my-element>
@tomalec
tomalec / custom-element.js
Last active October 27, 2021 19:28
Fetch a list of latest minor WC releases
customElements.define( 'wc-latest-releases', class extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
}
static get observedAttributes() { return ["limit"]; }
get limit() {
return Number(this.getAttribute("limit"));
}
async fetchRealeses() {
@tomalec
tomalec / index.js
Created April 21, 2021 15:45
Snippets to list all custom elements on the page.
customElsMap = Array.from( document.querySelectorAll( '*' ) ).filter( (e) => e.tagName.includes('-'))
.reduce((accu, el)=>{
let set = accu.get( el.tagName );
if( ! set ) {
set = new Set();
accu.set( el.tagName, set );
}
set.add( el );
return accu;
}, new Map());
@tomalec
tomalec / 00-create-shadow-root.html
Last active February 8, 2018 01:03
test for Declarative Shadow DOM https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Declarative-Shadow-DOM.md
<div id="host-1"><shadowroot mode="open">shadow</shadowroot></div>
<script>
it('Once parsed should create shadow root in parent element - **host**, and append own content into there.', function() {
const host = document.querySelector('#host-1');
assert(host.shadowRoot, "should have shadowRoot property attached");
assert(host.shadowRoot.innerHTML === 'shadow');
});
</script>
@tomalec
tomalec / findStylesheetsInAllHTMLImports-bookmarklet.html
Last active November 30, 2017 12:32
Find stylesheets in all HTML Imports, as they are now deprecated https://github.com/TakayoshiKochi/deprecate-style-in-html-imports
<a href="javascript:(function(){var%20screl=document.createElement('script');screl.setAttribute('type','text/javascript');screl.setAttribute('src','https://gist.githubusercontent.com/tomalec/47f0acd910a729d0b6a2e55061e5c26e/raw/4843f8a32d971f0465871a2d26cf6cc5c88e1229/findStylesheetsInAllHTMLImports.js');document.body.appendChild(screl);})();">Find HTML Imported styles bookmarklet</a>
@tomalec
tomalec / cheatsheet.md
Created April 6, 2017 22:59
Shadow DOM & CSS glitches in V0 and V1

V0 webcomponents.js polyfill

::content selector is not polyfilled and breaks entire coma-separated list

When you load stylesheet with Shadow DOM selectors dynamically, ::content selector is not polyfilled. It get even worse as it breaks entire definition so for

.foo.bar,
.baz > ::content > .blah{
    color: green;
}
@tomalec
tomalec / view.html
Created March 8, 2017 12:29
Starcounter App's View example
<!-- dependencies goes here-->
<template>
<!-- All content/functional/meaningful elements goes here -->
<template is="starcounter-composition">
<!-- Shadow DOM layuout goes here -->
</template>
</template>
<!--- VanillaJS example -->
@tomalec
tomalec / index.html
Created November 11, 2015 19:18
Polymer's dom-bind two-way data binding to native element // source http://jsbin.com/seyiwi
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer's dom-bind two-way data binding to native element</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">
<script>
var MyElementPrototype = Object.create(HTMLElement.prototype, {
message: {
@tomalec
tomalec / distribution-order-test.html
Last active August 29, 2015 14:22
[Shadow DOM spec]: Focus navigation in distributed content. This is a specific case with content distribution nodes that changes the order of light DOM nodes in composed tree.
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="resources/shadow-dom.js"></script>
</head>
<body>
<p>This tests that pressing Tab key should traverse into shadow DOM subtrees, and pressing Shift-Tab should reverse the order.</p>
<p>This is a specific case with content distribution nodes that changes the order of light DOM nodes in composed tree</p>
<pre id="console"></pre>
@tomalec
tomalec / index.html
Last active August 29, 2015 14:14
"binding prior to Polymer" issue for async HTML Imports
<!-- working example: http://jsbin.com/boloxo/1/edit -->
<head>
<script src="../../../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../../../polymer/polymer.html">
</head>
<body>
<div id="stampHere"></div>
</body>