Curly Quotes with QuoteQuote

Tom Herni — Thu, 17 Apr 2025 15:07:06 +0000

I'm pleased to announce the first stable release of QuoteQuote—a library that converts boring, straight quotes to beautiful, typographically correct curly quotes, also known as smart quotes.

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.

The Specificity Of ::slotted()

Tom Herni — Thu, 08 Feb 2024 15:25:48 +0000

The ::slotted() pseudo-element allows you to style elements that are slotted into your web component. But, there is something that may catch you off guard: styles applied with ::slotted() lose to global styles.

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:

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.
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;
}

DEV Community: Tom Herni