PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
No Result
View All Result
Home Web Dev

Styling Web Components | CSS-Tricks

January 29, 2021
in Web Dev
280 12
Styling Web Components | CSS-Tricks


Nolan Lawson has a little emoji-picker-element that is awfully handy and incredibly easy to use. But considering you’d probably be using it within your own app, it should be style-able so it can incorporated nicely anywhere. How to allow that styling isn’t exactly obvious:

What wasn’t obvious to me, though, was how to allow users to style it. What if they wanted a different background color? What if they wanted the emoji to be bigger? What if they wanted a different font for the input field?

Nolan list four possibilities (I’ll rename them a bit in a way that helps me understand them).

  1. CSS Custom Properties: Style things like background: var(--background, white);. Custom properties penetrate the Shadow DOM, so you’re essentially adding styling hooks.
  2. Pre-built variations: You can add a class attribute to the custom elements, which are easy to access within CSS inside the Shadow DOM thanks to the pseudo selectors, like :host(.dark) { background: black; }.
  3. Shadow parts: You add attributes to things you want to be style-able, like <span part="foo">, then CSS from the outside can reach in like custom-component::part(foo) { }.
  4. User forced: Despite the nothing in/nothing out vibe of the Shadow DOM, you can always reach the element.shadowRoot and inject a <style>, so there is always a way to get styles in.

It’s probably worth a mention that the DOM you slot into place is style-able from “outside” CSS as it were.

This is such a funky problem. I like the Shadow DOM because it’s the closest thing we have on the web platform to scoped styles which are definitely a good idea. But I don’t love any of those styling solutions. They all seem to force me into thinking about what kind of styling API I want to offer and document it, while not encouraging any particular consistency across components.

To me, the DOM already is a styling API. I like the scoped protection, but there should be an easy way to reach in there and style things if I want to. Seems like there should be a very simple CSS-only way to reach inside and still use the cascade and such. Maybe the dash-separated custom-element name is enough? my-custom-elemement li { }. Or maybe it’s more explicit, like @shadow my-custom-element li { }. I just think it should be easier. Constructable Stylesheets don’t seem like a step toward make it easier, either.

Last time I was thinking about styling web components, I was just trying to figure out how to it works in the first place, not considering how to expose styling options to consumers of the component.

Does this actually come up as a problem in day-to-day work? Sure does.

Heyyyy Web Component folks, I’m modernizing my old <podcast-player> custom element (now built with lit-element and has better a11y and TimeJumping), but I left it as a PR because I have a few questions on how to best approach styling and customization. https://t.co/UecDytLUgF

— Dave Rupert (@davatron5000) January 20, 2021

I don’t see any particularly good options in that thread (yet) for the styling approach. If I was Dave, I’d be tempted to just do nothing. Offer minimal styling, and if people wanna style it, they can do it however they want from their copy of the component. Or they can “force” the styles in, meaning you have complete freedom.





Source link

Share219Tweet137Share55Pin49

Related Posts

Weekly Platform News: Reduced Motion, CORS, WhiteHouse.gov, popups, and 100vw
Web Dev

Weekly Platform News: Reduced Motion, CORS, WhiteHouse.gov, popups, and 100vw

In this week’s roundup, we highlight a proposal for a new <popup> element, check the use of prefers-reduced-motion on...

February 26, 2021
The Things I Add to Tailwind CSS Right Out of the Box
Web Dev

The Things I Add to Tailwind CSS Right Out of the Box

In every project where I use Tailwind CSS, I end up adding something to it. Some of these things...

February 26, 2021
Laravel Sail adds support for choosing which services you’d like installed
Web Dev

Laravel Sail adds support for choosing which services you’d like installed

Laravel Sail, a lightweight CLI for interacting with Laravel's default docker environment, recently launched a new update that allows...

February 26, 2021
Reader Question: Why did you choose Statamic for Laravel News?
Web Dev

Reader Question: Why did you choose Statamic for Laravel News?

Steve McDougall asked us a great question on Twitter about our redesign and relaunch of Laravel News on Statamic:...

February 26, 2021
Next Post
Making GitHub’s new homepage fast and performant

Making GitHub’s new homepage fast and performant

Bulletproof flag components | Jay Freestone

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Requirements for Successfully Installing CloudEndure : idk.dev

Requirements for Successfully Installing CloudEndure : idk.dev

September 11, 2020
AWS Well-Architected Framework – Updated White Papers, Tools, and Best Practices : idk.dev

AWS Well-Architected Framework – Updated White Papers, Tools, and Best Practices : idk.dev

July 9, 2020
Optimize Largest Contentful Paint

Optimize Largest Contentful Paint

May 28, 2020
TastyIgniter: Open Source Restaurant Software

TastyIgniter: Open Source Restaurant Software

February 9, 2021

Categories

  • AWS
  • Big Data
  • Database
  • DevOps
  • IoT
  • Linux
  • Web Dev
No Result
View All Result
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In