View Code? Open in Web Editor
NEW
Supercharge your Web Platform knowledge
Home Page: https://webcomponents.guide/
License: Creative Commons Attribution Share Alike 4.0 International
HTML 16.67%
JavaScript 35.14%
CSS 46.26%
Liquid 1.93%
webcomponents.guide's Introduction
webcomponents.guide's People
webcomponents.guide's Issues
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
Awaiting Schedule
These updates are awaiting their schedule. Click on a checkbox to get an update now.
Open
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
Update CodeMirror (@codemirror/autocomplete
, @codemirror/commands
, @codemirror/lang-html
, @codemirror/lang-javascript
, @codemirror/language
, @codemirror/lint
, @codemirror/search
, @codemirror/state
, @codemirror/view
)
Update devDependencies (major) (cssnano
, dedent
, dictionary-en
, markdown-it
, postcss-import
, postcss-preset-env
, prettier
, remark-cli
, remark-frontmatter
, remark-gfm
, remark-lint-no-duplicate-headings
, remark-lint-no-duplicate-headings-in-section
, remark-preset-lint-consistent
, remark-preset-lint-markdown-style-guide
, remark-preset-lint-recommended
, remark-retext
, remark-validate-links
, retext-contractions
, retext-diacritics
, retext-english
, retext-equality
, retext-indefinite-article
, retext-intensify
, retext-passive
, retext-profanities
, retext-quotes
, retext-readability
, retext-redundant-acronyms
, retext-repeated-words
, retext-sentence-spacing
, retext-simplify
, retext-spell
, string-to-template-literal
, stylelint
, stylelint-config-standard
, stylelint-media-use-custom-media
, stylelint-use-nesting
, stylelint-value-no-unknown-custom-properties
)
Detected dependencies
github-actions
.github/workflows/pages.yml
actions/checkout v4
actions/setup-node v4
paper-spa/upload-pages-artifact v0
.github/workflows/test.yml
actions/checkout v4
actions/setup-node v4
npm
package.json
@codemirror/autocomplete ^6.4.0
@codemirror/commands ^6.1.3
@codemirror/lang-css ^6.0.1
@codemirror/lang-html ^6.4.1
@codemirror/lang-javascript ^6.1.2
@codemirror/language ^6.4.0
@codemirror/lint ^6.1.0
@codemirror/search ^6.2.3
@codemirror/state ^6.2.0
@codemirror/view ^6.7.3
codemirror ^6.0.1
container-query-polyfill ^1.0.2
@11ty/eleventy ^2.0.0
@11ty/eleventy-fetch ^4.0.0
@11ty/eleventy-plugin-rss ^1.2.0
@11ty/eleventy-plugin-syntaxhighlight ^5.0.0
@github/relative-time-element ^4.1.5
@oddbird/popover-polyfill ^0.4.0
@ungap/custom-elements ^1.1.1
autoprefixer 10.4.19
cheerio 1.0.0-rc.12
construct-style-sheets-polyfill ^3.1.0
cssnano ^6.0.1
dedent ^0.7.0
dictionary-en ^3.2.0
eleventy-postcss-extension 1.0.0
eslint-plugin-custom-elements ^0.0.8
glob ^10.2.7
markdown-it ^13.0.1
markdown-it-github-headings ^2.0.1
markdownlint-cli ^0.40.0
node-fetch ^3.3.0
open-props ^1.5.5
postcss ^8.4.20
postcss-combine-duplicated-selectors 10.0.3
postcss-import 15.1.0
postcss-jit-props 1.0.14
postcss-preset-env ^8.0.0
prettier ^2.8.1
remark-cli ^11.0.0
remark-frontmatter ^4.0.1
remark-gfm ^3.0.1
remark-lint-no-duplicate-headings ^3.1.1
remark-lint-no-duplicate-headings-in-section ^3.1.1
remark-preset-lint-consistent ^5.1.1
remark-preset-lint-markdown-style-guide ^5.1.2
remark-preset-lint-recommended ^6.1.2
remark-preset-prettier ^2.0.1
remark-retext ^5.0.1
remark-validate-links ^12.1.0
retext-contractions ^5.2.0
retext-diacritics ^4.2.0
retext-english ^4.1.0
retext-equality ^6.6.0
retext-indefinite-article ^4.2.0
retext-intensify ^6.2.0
retext-passive ^4.2.0
retext-profanities ^7.2.2
retext-quotes ^5.2.0
retext-readability ^7.2.0
retext-redundant-acronyms ^4.3.0
retext-repeated-words ^4.2.0
retext-sentence-spacing ^5.2.0
retext-simplify ^7.2.0
retext-spell ^5.3.0
string-to-template-literal ^2.0.0
stylelint ^14.16.1
stylelint-config-standard ^29.0.0
stylelint-media-use-custom-media ^2.0.1
stylelint-use-logical ^2.0.0
stylelint-use-nesting ^4.0.0
stylelint-value-no-unknown-custom-properties ^4.0.0
This website uses the logo from Web Components SF. I believe it's a permissively licensed logo, but we don't have the source or attribution in the repository (or on the site) and I cannot seem to find the source for it now.
Perhaps @koddsson knows or can help? Maybe @graynorton can help here too? See w3c/webcomponents-cg#4 (comment)
Been thinking about this post and what the content should be. Here are some ideas. It doesn't need to contain everything.
Important concepts for working with styles in the Shadow DOM.
CSS inheritance and which properties inherit.
CSS custom properties inherit by default (until we have @property
)
The order of precedence (I can rework this: https://shadowdom.style )
Shadow DOM specific selectors
Having a good mental model for slots and parts.
Maybe stuff like CustomStateSet for state pseudo selectors.
Ways to style components (i.e. style tag in shadow DOM, link tag in Shadow DOM, constructed stylesheets).
Best practices for styling.
Could I request the inclusion of the Golgi WebComponents framework in your forthcoming ecosystem section? Happy to provide tutorial/blog if interested, though most relevant info is included in the repo at:
https://github.com/robtweed/golgi
Many thanks and congrats on your WebComponents Guide!
Rob