QuoteQuote is available on GitHub and npm. Download it using your favorite package manager, such as npm, pnpm, or yarn.

npm install quote-quote

I’ve also launched a website where you can convert text online.

Lightweight and modern#

The library is lightweight, modern, tree-shakeable, and supports both ESM and CJS. At the time of writing, it only exports convert(), which does the most important thing: convert straight quotes to curly quotes.

I have plans for additional features, such as support for Markdown and the DOM. Development for these features will begin soon and will be added to the library in accordance with SemVer (Semantic Versioning).

Why QuoteQuote is necessary#

There are similar libraries out there, but they all have different issues. Some haven’t been updated in years and have open bugs that are fixable. Others don’t support ESM or CJS, lack TypeScript support, or are simply outdated. Issues and pull requests are mostly met with silence.

Also, using curly quotes manually is just too difficult. Keyboards typically offer straight quotes, and only allow curly quotes if you happen to know the right key combinations (for example, Alt + 0147 on Windows and Option + [ on macOS for just one specific quotation mark).

Why curly quotes#

“Curly quotes are the quotation marks used in good typography.” says Matthew Butterick in Practical Typography—and I must say, I agree. Curly quotes are more legible and flow better with the content. They are a must for blog posts, articles, and professional writing in general.

Give QuoteQuote a try and let me know what you think! I welcome all feedback, as well as issues and pull requests on GitHub. And if you’d like to support the library, feel free to star the repository.

Imagine a website with the following markup:

<style>
  p { color: blue } /* (0, 0, 1) */
</style>

<my-element>
  <p>Hello world</p>
</my-element>

Where <my-element> is a web component that adds the following styles:

:host ::slotted(p) { /* (0, 1, 2) */
  color: red;
}

The website’s global styles will win, and the text will be blue. Even though the specificity of :host ::slotted(p) (0, 1, 2) is higher than p (0, 0, 1).

The web component cannot set any CSS properties on a slotted element that are already set by global styles.

This becomes an even bigger issue when global styles include a “reset” stylesheet (like Normalize.css). Reset stylesheets touch the styling of many HTML elements, making it even less likely for slotted styles to be applied.

And in case you were wondering, increasing the argument’s specificity of ::slotted() will also not help you win from global styles.

/* Still loses to global styles */
::slotted(p#foo) {
  color: red;
}

Encapsulation contexts#

When explaining how declarations are sorted by the cascade, the CSS spec says the following about cascade contexts:

“When comparing two declarations that are sourced from different encapsulation contexts, then for normal rules the declaration from the outer context wins, and for important rules the declaration from the inner context wins.”

This essentially means that, without !important, a web component’s ::slotted() rules are overridden by the outer context (global styles). Specificity pretty much goes out the window.

The next part is also worth mentioning:

“This effectively means that normal declarations belonging to an encapsulation context can set defaults that are easily overridden by the outer context, while important declarations belonging to an encapsulation context can enforce requirements that cannot be overridden by the outer context.”

Using !important seems to be the official way to enforce slotted styles.

Making slotted rules important#

As we now know, the only way to make ::slotted() win is to make rules important. It’s not pretty, but considering it’s the only way, I suppose this is a case where using !important is justified.

/* Wins from global styles */
::slotted(p) {
  color: red !important;
}

However, consumers may not appreciate their slotted elements being styled with !important. Slotted elements are their elements in their DOM. And if they want to set a property that is already set with !important, then they now need to do the same to win the specificity battle.

Why this behavior is tricky#

It’s likely that most developers would not anticipate this behavior. They would likely assume that styles set with ::slotted() compete with the specificity of global styles.

Additionally, when a web component is developed and tested in an environment without (conflicting) global styles, then this issue is easy to miss before it makes its way to production.

The purpose of ::slotted() is to set default styles that can be easily overridden. But consumers can have reset stylesheets, or import stylesheets over which they have no control (particularly in larger corporate environments). In those cases, slotted styles are overridden too easily (i.e. unintentionally).

How to proceed#

Slotted styles without !important may not end up being applied as expected. If this is an issue for your web component, then it’s time to make a decision:

1. Set important slotted styles with !important to enforce them. Document the reason behind this decision and what consumers would have to do to override those styles if necessary.

2. Steer clear of ::slotted() altogether. Instead, document which styles consumers are recommended to set when slotting elements. Argument could be made that consumers should remain solely responsible for styling their elements.

Choose an approach that aligns with your philosophy. Make a conscious decision and be consistent.

It may be worth mentioning that the specificity of ::slotted() still works as expected within the same encapsulation context. It helps determine which declarations are applied by the web component, even if they were to eventually be overridden by global styles.

/* Wins from the selector below (but
   still loses to global styles) */
:host ::slotted(p) {
  color: red;
}

::slotted(p) {
  color: green;
}

And so, that’s what I did. Because what else are you supposed to do on Saturdays, right? Anyway… Just like that, the “minimal effort” plan turned into “let’s build it all from scratch.”

What excited me most about building my blog was the idea of having full control over every aspect of it, from the design to the technical implementation. There are still things I want to add and improve, but I’m happy enough with the result so far to put it online. Also, at some point, you just have to stop tinkering and start writing.

The primary focus of my blog will be on web development, design, and other technical things that interest me. I have several ideas for posts I want to write first. One of them is about how I built my blog, focusing on the design and technical decisions.

I’d like to conclude my first post with a brief personal introduction. My name is Tom, and I’m a front-end engineer passionate about designing and building creative solutions for the web. I’ve been into design and web development since I was a kid, and I’m fortunate enough to have turned my hobby into my career. I live in The Netherlands with my girlfriend, Stephanie, and we enjoy traveling, movies, and an occasional (and slightly competitive) game of Rummikub.