Skip to content

Instantly share code, notes, and snippets.

Avatar

Jan Miksovsky JanMiksovsky

View GitHub Profile
@JanMiksovsky
JanMiksovsky / carousel.html
Created Jul 13, 2020
Elix Carousel with closed shadow root
View carousel.html
@JanMiksovsky
JanMiksovsky / styleableCarousel.html
Last active Apr 26, 2019
Hypothetical styleable carousel component showing custom parts and custom pseudo-classes
View styleableCarousel.html
<html>
<head>
<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 https://component.kitchen/elix/Carousel.
//
// This shows two related web component features which are desired:
//
@JanMiksovsky
JanMiksovsky / index.html
Created Dec 3, 2018
Styling sugar example
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<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
JanMiksovsky / portStatus.dot
Last active Aug 22, 2016
Component porting status
View portStatus.dot
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
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.
Goals:
* Usability excellence
* Work in a wide variety of situations (Gold Standard)
* As functionally complete as possible
@JanMiksovsky
JanMiksovsky / realTemplate.html
Created Oct 2, 2015
Create a Polymer element using a real <template>, not a <dom-module>
View realTemplate.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="import" href="../components/polymer/polymer.html">
<template id="test-element">
Hello, <content></content>.
</template>
@JanMiksovsky
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
exception.
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
@JanMiksovsky
JanMiksovsky / gist:4f06a2e4cf0ea054ccbd
Created Oct 30, 2014
Does an akyral-modal instance pick up body styling?
View gist:4f06a2e4cf0ea054ccbd
<!DOCTYPE html>
<html>
<head>
<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
JanMiksovsky / index.html
Created May 16, 2014
Web components example: text-input-with-button
View index.html
<html>
<head>
<meta charset="utf-8">
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="text-input-with-button.html">
<script>
document.addEventListener( "go", function( event ) {
alert( event.detail );
});
You can’t perform that action at this time.