Skip to content

Instantly share code, notes, and snippets.


Jan Miksovsky JanMiksovsky

View GitHub Profile
JanMiksovsky / carousel.html
Created Jul 13, 2020
Elix Carousel with closed shadow root
View carousel.html
JanMiksovsky / styleableCarousel.html
Last active Apr 26, 2019
Hypothetical styleable carousel component showing custom parts and custom pseudo-classes
View styleableCarousel.html
<title>Styling a part in combination with a custom pseudo-class</title>
<script type="module">
// This code sample shows a hypothetical styleable carousel component
// modeled after
// This shows two related web component features which are desired:
JanMiksovsky / index.html
Created Dec 3, 2018
Styling sugar example
View index.html
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Custom styling example</title>
<style id="customButtonStyle">
#inner {
background: white;
JanMiksovsky /
Last active Aug 22, 2016
Component porting status
digraph G {
// Dependency graph of Paper/Iron elements
// solid (default) lines = dependency
// sotted lines = devDependency
// green = generally works under Polymer 2.0: unit tests pass, demo looks reasonable (except for styling)
// yellow = some porting work has been done
// gray = porting status unknown or not begun
View bower.json
"name": "issue-16",
"version": "0.0.0",
"dependencies": {
"iron-pages": "PolymerElements/iron-pages",
"paper-tabs": "PolymerElements/paper-tabs"
JanMiksovsky / BasicWebComponentsArchitecture.js
Created Mar 14, 2016
Summary of Basic Web Components architecture, focusing on its use of mixins
View BasicWebComponentsArchitecture.js
Basic Web Components architecture
The project seeks to provide a comprehensive set of solid, well-designed web
components that implement very common user interface patterns.
* Usability excellence
* Work in a wide variety of situations (Gold Standard)
* As functionally complete as possible
JanMiksovsky / realTemplate.html
Created Oct 2, 2015
Create a Polymer element using a real <template>, not a <dom-module>
View realTemplate.html
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="import" href="../components/polymer/polymer.html">
<template id="test-element">
Hello, <content></content>.
JanMiksovsky / gist:16f7f5f2fc5cca95fda1
Created May 29, 2015
Repro case for Polymer 1.0 element which can't be instantiated in Shady DOM
View gist:16f7f5f2fc5cca95fda1
Repro case for bug that appears under Shady DOM.
Attempting to instantiate this component will trigger an exception. Both the
hostAttributes and the property change observer appear necessary to trigger the
<link rel="import" href="../bower_components/polymer/polymer.html">
JanMiksovsky / gist:4f06a2e4cf0ea054ccbd
Created Oct 30, 2014
Does an akyral-modal instance pick up body styling?
View gist:4f06a2e4cf0ea054ccbd
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="akyral-modal/bower_components/platform/platform.js"></script>
<link rel="import" href="akyral-modal/bower_components/akyral-modal/akyral-modal.html">
JanMiksovsky / index.html
Created May 16, 2014
Web components example: text-input-with-button
View index.html
<meta charset="utf-8">
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="text-input-with-button.html">
document.addEventListener( "go", function( event ) {
alert( event.detail );
You can’t perform that action at this time.