Merge branch 'main' of [email protected]:WebComponentsGuide/webcomponents.guide

Author: keithamus

.spelling

@@ -0,0 +1,15 @@
+# markdown-spellcheck spelling configuration file
+# Format - lines beginning # are comments
+# global dictionary is at the start, file overrides afterwards
+# one word per line, to define a file override use ' - filename'
+# where filename is relative to this configuration file
+lifecycle
+devtools
+macOS
+iOS
+18
+SeaMonkey
+polyfills
+CSS
+APIs
+ShadowDOM

learn/components/naming-your-components.md

@@ -16,7 +16,7 @@ There are some specific rules that you must adhere to to make a valid tag name:
 - It _can_ contain underscores, and numbers.
 - It _can_ contain characters from different alphabets, such as `é`, `ð`, `ö`, `爱`.
 
-An invalid name will cause a `DOMException` to be thrown when you set up your custom element. 
+An invalid name will cause a `DOMException` to be thrown when you set up your custom element.
 
 Try typing a tag name below to see if it's a valid custom element tag:
 
@@ -59,8 +59,7 @@ DOMException: CustomElementRegistry.define: 'annotation-xml' is not a valid cust
 
 ## Tips on naming element
 
-While none of the following is prescriptive, here are some tips and tricks on how to pick a good name for your
-elements:
+While none of the following is prescriptive, here are some tips and tricks on how to pick a good name for your elements:
 
 ### Avoid splitting compound words
 

learn/index.md

@@ -12,7 +12,7 @@ you've got a server that can render HTML, then you can render Web Components!
 
 Web Components allow you to extend the vocabulary of your HTML. You can define new behaviors that go beyond the built in
 tags. New features such as `<slide-out-menu>` or `<stop-watch>` are at your finger tips. JavaScript can drive these
-definitions, allowing advanced behaviours and interactions.
+definitions, allowing advanced behaviors and interactions.
 
 {% tip %}
 
@@ -22,7 +22,7 @@ apart from native elements. New native elements will never have a dash, and so w
 {% endtip %}
 
 Here's an example of a web component that renders a timer. It defines its own [styles][styles], it renders into a
-[shadowroot][shadowroot], and has its own [private state][private-state]. It makes use of the [lifecycle
+[shadow root][shadowroot], and has its own [private state][private-state]. It makes use of the [lifecycle
 callbacks][lifecycle] to know when to start counting. These are all built in web platform features!
 
 [styles]: /learn/components/styling

learn/set-up-your-environment.md

@@ -12,7 +12,7 @@ set of devtools makes it much easier to debug your application. A lot of develop
 browser][chrome], which has powerful built in devtools. [Mozilla Firefox][firefox] is another great option with equally
 good devtools. There's also Mozilla [Firefox Developer edition][firefox-dev] which has extra features, like an
 Integrated Development Environment. [Microsoft Edge][edge] is another great browser, built on the same technologies as
-Google Chrome. If you're on [MacOS][macos] then [Safari][safari] can be a good choice, but it's not quite as capable as
+Google Chrome. If you're on [macOS][macos] then [Safari][safari] can be a good choice, but it's not quite as capable as
 the other browsers. Safari's devtools aren't quite as capable as the others, and it lacks support for some Web Component
 features.
 
@@ -52,7 +52,7 @@ make the most of them.
 If you're using Google Chrome, check out the [Chrome Developers documentation on the Chrome Devtools][chrome-devtools].
 It's a great resource for learning exactly how the developer tools inside Google Chrome work. Mozilla has a similar
 [guide on Firefox Developer Tools][firefox-devtools]. Microsoft have a smaller but still useful [guide on the Edge
-developer tools][edge-devtools]. Apple's Safari has a useful [five minute walkthrough of their Web
+developer tools][edge-devtools]. Apple's Safari has a useful [five minute walk through of their Web
 Inspector][safari-devtools].
 
 Here's a handy guide on how to quickly access the developer tools, depending on your browser and OS:
@@ -77,7 +77,7 @@ Here's a handy guide on how to quickly access the developer tools, depending on
 To get starting writing web components you'll need a development environment. While you can use any text editor to
 develop, using an Integrated Development Environment (IDE) will give you lots of features that can make for a much
 better developer experience. One of the most popular IDEs today is [VS Code][vscode], and with good reason! It comes
-with exelent support for writing HTML, JavaScript and CSS out of the box as well as some great plugins that you can
+with excellent support for writing HTML, JavaScript and CSS out of the box as well as some great plugins that you can
 install. It can hook directly into web browsers like Chrome or Firefox using the allowing you to debug your applications
 without leaving your editor. All of these features makes it ideal for writing Web Components and websites that use them.
 

learn/your-first-web-component.md

@@ -8,7 +8,7 @@ title: Your First Web Component
 
 The term "Web Components" encompasses a lot of individual APIs, some that have existed for a very long time in the web,
 and some that are much newer. If you've written JavaScript before then you might be familiar with [Classes][classes], If
-you've written JavaScript for the _web_ before, you might already be familar with some of _those_ APIs too, for example
+you've written JavaScript for the _web_ before, you might already be familiar with some of _those_ APIs too, for example
 [Events][events] and the [DOM APIs][dom-apis] like `querySelector`. Many Web Components will make use of those existing
 APIs.