This repository was archived by the owner on Jun 14, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathbrowser-support.html
More file actions
194 lines (157 loc) · 11.3 KB
/
browser-support.html
File metadata and controls
194 lines (157 loc) · 11.3 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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<!-- Begin Jekyll SEO tag v2.3.0 -->
<title>Browser Support | RHElements</title>
<meta property="og:title" content="Browser Support" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="RHElements is a set of web components" />
<meta property="og:description" content="RHElements is a set of web components" />
<link rel="canonical" href="http://localhost:4000/docs/browser-support.html" />
<meta property="og:url" content="http://localhost:4000/docs/browser-support.html" />
<meta property="og:site_name" content="RHElements" />
<script type="application/ld+json">
{"name":null,"description":"RHElements is a set of web components","author":null,"@type":"WebPage","url":"http://localhost:4000/docs/browser-support.html","publisher":null,"image":null,"headline":"Browser Support","dateModified":null,"datePublished":null,"sameAs":null,"mainEntityOfPage":null,"@context":"http://schema.org"}</script>
<!-- End Jekyll SEO tag -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#157878">
<link rel="stylesheet" href="/assets/css/icono.min.css?v=f39f57b4ea22d402b440701b659c28950534c021">
<link href='https://overpass-30e2.kxcdn.com/overpass.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/assets/css/style.css?v=f39f57b4ea22d402b440701b659c28950534c021">
</head>
<body>
<!-- <section class="page-header">
<h1 class="project-name">RHElements</h1>
<h2 class="project-tagline">RHElements is a set of web components</h2>
<a href="http://github.com/RHElements/rhelements.github.io" class="btn">View on GitHub</a>
</section> -->
<header>
<nav>
<button>
<i class="icono-hamburger"></i>
</button>
<a href="/">RHElements</a>
</nav>
</header>
<main>
<aside>
<nav>
<ul>
<li>
<span class="header">Use a RHElement</span>
<ul>
<li><a href="/docs/use-a-rhelement/get-started.html">Get Started</a></li>
<li><a href="/docs/use-a-rhelement/vanilla-js-es6.html">Vanilla JS ES6</a></li>
<li><a href="/docs/use-a-rhelement/vanilla-js-es5-without-module-loader.html">Vanilla JS ES5 without a Module Loader</a></li>
<li><a href="/docs/use-a-rhelement/vanilla-js-es5-with-module-loader.html">Vanilla JS ES5 with a Module Loader</a></li>
</ul>
</li>
<li>
<span class="header">Create a RHElement</span>
<ul>
<li><a href="/docs/get-started.html">Get Started</a></li>
<li><a href="/docs/create-a-rhelement/step-1.html">Step 1: Scaffold</a></li>
<li><a href="/docs/create-a-rhelement/step-2a.html">Step 2: Develop (Structure)</a></li>
<li><a href="/docs/create-a-rhelement/step-2b.html">Step 2: Develop (HTML)</a></li>
<li><a href="/docs/create-a-rhelement/step-2c.html">Step 2: Develop (CSS or Sass)</a></li>
<li><a href="/docs/create-a-rhelement/step-2d.html">Step 2: Develop (Javascript)</a></li>
<li><a href="/docs/create-a-rhelement/step-3.html">Step 3: Test</a></li>
<li><a href="/docs/create-a-rhelement/step-4.html">Step 4: Publish</a></li>
</ul>
</li>
<li><a href="/docs/browser-support.html">Browser Support</a></li>
<li><a href="/docs/framework-support.html">Framework Support</a></li>
</ul>
</nav>
<div class="scrim"></div>
</aside>
<section class="main-content">
<h1 id="browser-support">Browser Support</h1>
<p>RHElements are built on top of the <a href="https://w3c.github.io/webcomponents/spec/custom/">Custom Elements v1 spec</a>. As a result, with the help of the web components polyfill, we can support all major browsers and go all the way back to IE 11.</p>
<table>
<thead>
<tr>
<th style="text-align: left">Chrome</th>
<th style="text-align: left">Firefox</th>
<th style="text-align: left">Safari</th>
<th style="text-align: left">Edge</th>
<th style="text-align: left">IE 11</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">✓</td>
<td style="text-align: left">✓</td>
<td style="text-align: left">✓</td>
<td style="text-align: left">✓</td>
<td style="text-align: left">✓</td>
</tr>
</tbody>
</table>
<h2 id="written-in-es6">Written in ES6</h2>
<p>To make sure we’re future-proof, RHElements are written in ES6. As more browsers begin to support the use of ES6 modules and the ability to import dependencies, the ES6 versions of our RHElements can be used directly. Our goal is to eventually phase out the transpilation step in our build process, but until then, we’ll provide both the ES6 and ES5 versions on npm.</p>
<h2 id="backwards-compatible-with-polyfills">Backwards Compatible with Polyfills</h2>
<p>To provide the widest range of support for RHElements, we provide an ES5 version of our RHElements that will work in all major browsers and even IE11 with some help from polyfills.</p>
<p>As a developer, you will need to make sure you include the necessary polyfills. We recommend using the <a href="https://github.com/WebComponents/webcomponentsjs">webcomponentsjs polyfill</a> provided by <a href="https://www.webcomponents.org/">webcomponents.org</a>. There are two options when using this polyfill. You can either include the polyfill for the features that you know you want to support or you can use the webcomponents-loader.js file. The webcomponents-loader.js file will run feature detection on the client side and asynchronously load the polyfills needed to support web components.</p>
<h3 id="polyfill-option-1---include-the-polyfills-you-need">Polyfill Option 1 - Include the polyfills you need</h3>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span>
<span class="nt"><title></span>RHElements<span class="nt"></title></span>
<span class="c"><!-- uncomment the es5-adapter if you're using the compiled version --></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.10/custom-elements-es5-adapter.js"</span><span class="nt">></script></span>
<span class="c"><!-- webcomponents-lite.js includes all of the polyfills --></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.10/webcomponents-lite.js"</span><span class="nt">></script></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<p>For more options on which polyfill to include, refer to the <a href="https://github.com/WebComponents/webcomponentsjs#how-to-use">README on the webcomponentsjs repository</a>.</p>
<h3 id="polyfill-option-2---load-only-the-necessary-polyfills">Polyfill Option 2 - Load only the necessary polyfills</h3>
<p>There’s only a difference of the web component file that’s being downloaded, but with the loader bringing in the necessary polyfills asynchronously, you’ll need to wait for the <code class="highlighter-rouge">WebComponentsReady</code> event to fire before you safely continue.</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span>
<span class="nt"><title></span>RHElements<span class="nt"></title></span>
<span class="c"><!-- uncomment the es5-adapter if you're using the compiled version --></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.10/custom-elements-es5-adapter.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.10/webcomponents-loader.js"</span><span class="nt">></script></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><script></span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'WebComponentsReady'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">// Polyfills are loaded and it's safe to interact with the components</span>
<span class="p">});</span>
<span class="nt"></script></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<p>For a more in-depth explanation, view the <a href="https://github.com/WebComponents/webcomponentsjs#webcomponents-loaderjs">example on GitHub</a>.</p>
<h3 id="custom-elements-es5-adapterjs">custom-elements-es5-adapter.js</h3>
<p>The two examples above also include the <code class="highlighter-rouge">custom-elements-es5-adapter.js</code> file before the web component polyfill. In the case that you need to support ES5, you need to include this polyfill. According to the spec, custom elements must be written as ES6 classes. However, in our build step we transpile our ES6 components to ES5 which makes it necessary for us to include the adapter to get our components to work.</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code><script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.10/custom-elements-es5-adapter.js"></script>
</code></pre></div></div>
<p>For more documentation, check out the <a href="https://github.com/WebComponents/webcomponentsjs#custom-elements-es5-adapterjs">custom-elements-es5-adapter.js section</a> on GitHub.</p>
<footer class="site-footer">
<span class="site-footer-owner"><a href="http://github.com/RHElements/rhelements.github.io">rhelements.github.io</a> is maintained by <a href="http://github.com/RHElements">RHElements</a>.</span>
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</span>
</footer>
</section>
</main>
<script>
const button = document.querySelector('header nav button');
const drawer = document.querySelector('aside');
const scrim = document.querySelector('.scrim');
button.addEventListener('click', function () {
drawer.classList.toggle('open');
});
scrim.addEventListener('click', function () {
drawer.classList.remove('open');
});
</script>
</body>
</html>