how to get a slot content in the css content property of a pseudo ;:before element (or :;after) in a web component?

Question

Well, I think that the question is in the title : in a web component, with shadowRoot, I want to use a slot text-content inside the content property of a pseudo ::before or ::after element. This could make me gain much lines.

Would you have an idea, a proposal, a solution ?

Answer 1

@lamplightdev

Thank you for your answer.

I was looking for something wich doesn't exist yet. So I have chose a solution with css var and a setter to set it :

class extends HTMLElement {
  set content(val) {
    this.setAttribute('data-content',val);
  }
  constructor() {
...

and, of course :

:host::before {
  content: attr(data-content);
...

This seems to be the lighter solution I may imagine.

I'd like to suggest to web's standards developpers to create a new css function : slot(name) witch, with attr(...), var(...) and calc(...), could help the use of pseudo elements inside a web component. Could someone show me the way to present this proposal ???

I do apologize for my poor english language (I'm french, nobdy's perfect).