Skip to content

Instantly share code, notes, and snippets.

@JanMiksovsky
JanMiksovsky / styleableCarousel.html
Last active April 26, 2019 01:56
Hypothetical styleable carousel component showing custom parts and custom pseudo-classes
<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 December 3, 2018 21:54
Styling sugar example
<!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 August 22, 2016 16:38
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
@JanMiksovsky
JanMiksovsky / realTemplate.html
Created October 2, 2015 21:49
Create a Polymer element using a real <template>, not a <dom-module>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="import" href="../components/polymer/polymer.html">
<template id="test-element">
Hello, <content></content>.
</template>
{
"name": "issue-16",
"version": "0.0.0",
"dependencies": {
"iron-pages": "PolymerElements/iron-pages",
"paper-tabs": "PolymerElements/paper-tabs"
}
}
@JanMiksovsky
JanMiksovsky / BasicWebComponentsArchitecture.js
Created March 14, 2016 23:19
Summary of Basic Web Components architecture, focusing on its use of mixins
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../tools/polymer/polymer.js"></script>
<element name="test-element">
<template>
@JanMiksovsky
JanMiksovsky / elementUpgradeTest
Created May 29, 2013 00:04
This test case for Polymer contrasts three similar situations in which a test element is used, but one of them is "upgraded" (converted from plain DOM to custom element instance) in an unexpected manner.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../polymer/polymer.js"></script>
<element name="test-element">
<template>
@JanMiksovsky
JanMiksovsky / gist:16f7f5f2fc5cca95fda1
Created May 29, 2015 22:08
Repro case for Polymer 1.0 element which can't be instantiated in Shady DOM
<!--
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 October 30, 2014 03:57
Does an akyral-modal instance pick up body styling?
<!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">