This repository was archived by the owner on Nov 18, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 113
Expand file tree
/
Copy pathindex.html
More file actions
35 lines (34 loc) · 14.5 KB
/
Copy pathindex.html
File metadata and controls
35 lines (34 loc) · 14.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Polyfills — WebComponents.org</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"><meta name="google-site-verification" content="px-LvGmZP4t9mI3QVcWkTYciiRbToixpY-F-NfIybaE"><meta name="author" content="Community"><meta name="description" content="A place to discuss and evolve Web Component best-practices"><meta name="theme-color" content="#3a99d7"><meta property="og:title" content="Polyfills — WebComponents.org"><meta property="og:image" content="https://webcomponents.github.io/img/logo.png"><meta property="og:url" content="https://webcomponents.github.io/polyfills"><meta property="og:description" content="A place to discuss and evolve Web Component best-practices"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Polyfills — WebComponents.org"><meta name="twitter:description" content="A place to discuss and evolve Web Component best-practices"><meta name="twitter:image" content="https://webcomponents.github.io/img/logo.png"><meta name="twitter:site" content="@Web_Components"><link rel="stylesheet" href="https://webcomponents.github.io/css/main.min.css"><link rel="stylesheet" href="https://webcomponents.github.io/css/syntax-highlight.min.css"><!--[if lt IE 10]>
<link rel="stylesheet" media="all" href="https://webcomponents.github.io/css/ielt10.min.css">
<![endif]--><link rel="icon" type="image/x-icon" href="https://webcomponents.github.io/img/favicon.ico"><link rel="publisher" href="https://plus.google.com/+WebcomponentsOrg"><script src="//use.typekit.net/ksn6mlw.js"></script><script>try{Typekit.load();}catch(e){}</script></head><body><div class="page-wrap"><header class="header-bar" role="banner"><div class="wrapper"><a class="logo" href="https://webcomponents.github.io"><img src="https://webcomponents.github.io/img/logo.svg" alt="WebComponents.org" width="60" height="39"> </a><a class="menu-button"><span></span> <span></span> <span></span></a><nav class="nav desktop-only" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement"><ul><li class="nav-item"><a href="https://webcomponents.github.io/" class="nav-link" title="Home" itemprop="url"><span itemprop="name">Home</span></a></li><li class="nav-item nav-active"><a href="https://webcomponents.github.io/polyfills/" class="nav-link" title="Polyfills" itemprop="url"><span itemprop="name">Polyfills</span></a></li><li class="nav-item"><a href="https://webcomponents.github.io/articles/" class="nav-link" title="Articles" itemprop="url"><span itemprop="name">Articles</span></a></li><li class="nav-item"><a href="https://webcomponents.github.io/presentations/" class="nav-link" title="Presentations" itemprop="url"><span itemprop="name">Presentations</span></a></li><li class="nav-item"><a href="https://webcomponents.github.io/podcasts/" class="nav-link" title="Podcasts" itemprop="url"><span itemprop="name">Podcasts</span></a></li><li class="nav-item"><a href="https://webcomponents.github.io/resources/" class="nav-link" title="Resources" itemprop="url"><span itemprop="name">Resources</span></a></li></ul></nav><script>(function() {
var cx = '006706517617519397807:s_k6dwkdtby';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();</script><div class="search-box desktop-only"><gcse:search></gcse:search></div></div></header><div class="notification_toolbar"><p class="notification_toolbar__header">Please help us make Web Components & PWA's better by completing <a target="_blank" href="https://bit.ly/web-survey-2016">this survey</a></p></div><div id="resources" class="wrapper"><main class="layout-single" role="main"><div class="single-content" role="article"><section class="card card-story" role="region"><p class="title" itemprop="name">Polyfills</p><div class="post-info" role="complementary"><p class="post-edit"><span class="icon-pencil"></span> <a href="https://github.com/webcomponents/webcomponents.github.io/edit/site/src/documents/polyfills/index.html.md">Edit this page</a></p></div><div class="description" itemprop="text"><h2 id="introduction">Introduction</h2><p><a href="https://github.com/WebComponents/webcomponentsjs">webcomponents.js</a> is a set of polyfills built on top of the <strong>Web Components</strong> specifications. It makes it possible for developers to use these standards today across all modern browsers.</p><p>As these technologies are implemented in browsers, the polyfills will shrink and you'll gain the benefits of native implementations. <code>webcomponents.js</code> automatically detects native support and switches to the fast path when available. Your elements seamlessly start relying on the native stuff--and get faster in the process.</p><p>Although most developers will want to use everything in <code>webcomponents.js</code>, the polyfills are designed to be used separately, as well. They're available independently as part of the default release download and can also be built standalone. For example, Mozilla's <a href="http://www.x-tags.org/">x-tags</a> and Brick projects use a subset of the <code>webcomponents.js</code> polyfills.</p><p><strong>Note</strong>: The <code>webcomponents.js</code> polyfill layer is no longer needed for browsers that fully implement the Web Components APIs, such as Chrome 36+.</p><h2 id="what-s-in-webcomponents-js-">What's in webcomponents.js?</h2><p>The polyfills are a bundle that includes the following libraries:</p><ul><li>Web Components<ul><li><a href="/polyfills/custom-elements/">Custom Elements</a> . Define new elements in HTML.</li><li><a href="/polyfills/html-imports/">HTML Imports</a>. Load element definitions and other resources declaratively.</li><li><a href="/polyfills/shadow-dom/">Shadow DOM</a>. Encapsulate DOM subtrees and the associated CSS.</li></ul></li><li>DOM<ul><li><a href="https://github.com/Polymer/WeakMap">WeakMap</a>. Shim for ES6 WeakMap type.</li><li><a href="https://github.com/Polymer/MutationObservers">Mutation Observers</a>. Efficiently watch for changes in the DOM.</li></ul></li></ul><p><strong>Note</strong>: A lighter <code>webcomponents-lite.js</code> build is included with the default download package including support for just Custom Elements and HTML Imports. This is useful if you don't require Shadow DOM in your application. You can <a href="https://github.com/WebComponents/webcomponentsjs#manually-building">generate</a> custom builds supporting any combination of Web Component features too.</p><h2 id="installation-usage">Installation & usage</h2><p>To start using these features today, first download <code>webcomponents.js</code> using Bower:</p><pre class="highlight"><code class="hljs sql">bower <span class="hljs-operator"><span class="hljs-keyword">install</span> <span class="hljs-comment">--save webcomponentsjs</span>
</span></code></pre><p>Then, include <code>webcomponents.js</code> as you would any other script:</p><pre class="highlight"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"bower_components/webcomponentsjs/webcomponents.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
</code></pre><p>Alternatively, you can install the Web Component polyfills using <a href="http://npmjs.org">npm</a>:</p><pre class="highlight"><code class="hljs sql">npm <span class="hljs-operator"><span class="hljs-keyword">install</span> <span class="hljs-comment">--save webcomponents.js</span>
</span></code></pre><p>Then, include <code>webcomponents.js</code> as you would any other script:</p><pre class="highlight"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"node_modules/webcomponents.js/webcomponents.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
</code></pre><p><strong>Note</strong>: Due to the nature of some of the polyfills, to maximize compatibility with other libraries, make sure that <code>webcomponents.js</code> is the first script tag in your document's <code><head></code>.</p><p>Once included, you can use HTML Imports, Custom Elements, Shadow DOM, and other emerging standards within your app. For example, to use a webcomponents.js element, just import it using an HTML Import:</p><pre class="highlight"><code class="hljs nix"><link <span class="hljs-variable">rel=</span><span class="hljs-string">"import"</span>
<span class="hljs-variable">href=</span><span class="hljs-string">"bower_components/paper-tabs/paper-tabs.html"</span>>
</code></pre><p>Then use <code><paper-tabs></code> just like any built-in tag.</p><p>While each polyfill can be built as a standalone, the recommended approach is to include the entire <code>webcomponents.js</code> file. This ensures all dependencies are present and the largest portion of the future web platform is available. Since this is the most-used configuration, it is also the most tested.</p><h2 id="building-each-polyfill">Building each polyfill</h2><p>For information on how to build each polyfill library independently, see <a href="https://github.com/WebComponents/webcomponentsjs#manually-building">Manually Building</a>.</p><h2 id="next-steps">Next steps</h2><p><code>webcomponents.js</code> is a wonderful foundation for working with Web Components in a cross-browser fashion. If you're ready to start building your own elements, and would like to learn about the additional features <code>webcomponents.js</code>, read our guide on <a href="/polyfills/custom-elements/">Custom Elements</a>.</p></div></section></div><div class="single-sidebar"><section class="card card-tags"><h3>Polyfills</h3><ul class="tag-list"><li><a href="/polyfills/"><span class="icon-arrow-right"></span> Introduction</a></li><li><a href="/polyfills/custom-elements/"><span class="icon-arrow-right"></span> Custom Elements</a></li><li><a href="/polyfills/html-imports/"><span class="icon-arrow-right"></span> HTML Imports</a></li><li><a href="/polyfills/shadow-dom/"><span class="icon-arrow-right"></span> Shadow DOM</a></li></ul></section></div></main></div></div><div class="aux-nav"><nav class="wrapper" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement"><ul><li>Learn</li><li><a href="https://webcomponents.github.io/articles/" title="Articles" itemprop="url"><span itemprop="name">Articles</span></a></li><li><a href="https://webcomponents.github.io/presentations/" title="Presentations" itemprop="url"><span itemprop="name">Presentations</span></a></li><li><a href="https://webcomponents.github.io/podcasts/" title="Podcasts" itemprop="url"><span itemprop="name">Podcasts</span></a></li></ul><ul><li>Code</li><li><a href="https://webcomponents.github.io/polyfills/" title="Polyfills" itemprop="url"><span itemprop="name">Polyfills</span></a></li><li><a href="https://webcomponents.github.io/resources/" title="Resources" itemprop="url"><span itemprop="name">Resources</span></a></li></ul><ul><li>Community</li><li><a href="https://webcomponents.github.io/about/" title="About" itemprop="url"><span itemprop="name">About</span></a></li><li><a href="https://webcomponents.github.io/assets/" title="Assets" itemprop="url"><span itemprop="name">Assets</span></a></li><li><a href="https://webcomponents.github.io/swags/" title="Swags" itemprop="url"><span itemprop="name">Swags</span></a></li></ul></nav></div><footer class="credits" role="contentinfo"><div class="wrapper"><p>Made with <span class="love">♥</span> by the <a target="_blank" class="credits-link" href="https://github.com/webcomponents/webcomponents.github.io/graphs/contributors" itemprop="publisher">WebComponents.org contributors.</a></p><ul class="social-buttons"><li class="tweet-btn"><iframe src="http://platform.twitter.com/widgets/tweet_button.1359159993.html#_=1360010161235&count=horizontal&id=twitter-widget-0&lang=en&size=m&url=https://webcomponents.github.io&text=WebComponents.org ~ A place to discuss and evolve Web Component best-practices" class="twitter-share-button twitter-count-horizontal" data-twttr-rendered="true" allowtransparency="true" frameborder="0" scrolling="no" width="100" height="20"></iframe></li><li class="fb-btn"><iframe src="//www.facebook.com/plugins/like.php?href=https://webcomponents.github.io&send=false&layout=button_count&width=100&show_faces=false&font&colorscheme=light&action=like&height=20&appId=176947299114210" allowtransparency="true" frameborder="0" scrolling="no" width="85" height="20"></iframe></li><li class="gplus-btn"><iframe src="https://plusone.google.com/_/+1/fastbutton?bsv&size=medium&hl=en-US&url=https://webcomponents.github.io&parent=https://webcomponents.github.io" allowtransparency="true" frameborder="0" scrolling="no" width="70" height="20"></iframe></li><li class="github-btn"><iframe src="http://ghbtns.com/github-btn.html?user=webcomponents&repo=webcomponents.github.io&type=watch&count=true&size=small" allowtransparency="true" frameborder="0" scrolling="0" width="85" height="20"></iframe></li></ul></div></footer><script src="https://webcomponents.github.io/js/main.js"></script><script>window.__insp = window.__insp || [];
__insp.push(['wid', 1646634871]);
(function() {
function __ldinsp(){var insp = document.createElement('script'); insp.type = 'text/javascript'; insp.async = true; insp.id = "inspsync"; insp.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://cdn.inspectlet.com/inspectlet.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(insp, x); }
if (window.attachEvent){
window.attachEvent('onload', __ldinsp);
}else{
window.addEventListener('load', __ldinsp, false);
}
})();</script><script>var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-47408119-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();</script></body></html>