How can I use domProps / v-html with styled component ?

// This example works ✔
createElement('div', {
    domProps: { innerHTML: this.settings.hero_title },
})

// This example doesn't works ❌
const HeroTitle = styled("h1")`
    color: red;
`;

createElement(HeroTitle, {
    domProps: { innerHTML: this.settings.hero_title },
})

is vue-emotion compatiple with ssr?

Imagine a title

const StyledTitle = styled('div')`
  color: cornflowerblue;
`;

that is used in a template and exported as a component Title:

<template>
  <StyledTitle>
    I am a title
  </StyledTitle>
</template>

Now, when overwriting the StyledTitle, it works as expected. It's color changes from blue to red:

const OverwrittenStyledTitle = styled(StyledTitle)`
  color: crimson;
`;

Although when overwriting the Title, it keeps it's original blue color and does not become green:

const OverwrittenTitle = styled(Title)`
  color: forestgreen;
`;

Is this expected behavior? In such instances, is it the "correct" approach to style via props (e.g. a prop type: 'main' | 'secondary, ...). Or is this a bug?
Also, I am not sure if this is related to either vue-emotion or emotion. So pardon me if this has nothing to do with vue-emotion.

Thank you for your time :)

does this work with vue3?

Sorry, me again. Just reporting that basic style composition no longer works after the breaking rewrite.

Reproduction here

Particularly relevant code below:

// App.js
import { styled } from "@egoist/vue-emotion";
import { css } from "emotion";

const bold = css`
  font-weight: bold;
`;

const red = css`
  color: red;
`;

const blue = css`
  color: blue;
`;

const otherComposition = css`
  ${bold};
  ${blue};
`;

const StyledComponent = styled("div")`
  ${bold};
  ${red};
`;

const StyledComponentTwo = styled("div")`
  ${bold};
  ${blue};
`;

export default {
  name: "App",
  render() {
    return (
      <div>
        <StyledComponent>Composition Doesn't Work</StyledComponent>
        <StyledComponentTwo>Composition Doesn't Work</StyledComponentTwo>
        <div class={otherComposition}>Composition Does Work</div>
      </div>
    );
  }
};

I was wonder if we could write code like this instead of using vuejs's jsx feature? Since I am facing some reactivity issues while working with jsx...

<template>
  <dummy-component></dummy-component>
</template>
<script>
import DummyComponent from './DummyComponent.vue'
import { styled } from '@egoist/vue-emotion'
export default {
  components: {
    'dummy-component': styled(DummyComponent)`
      .title:hover {
        color: #ed508f;
      }
    `,
  },
}
</script>
<style lang="scss" scoped></style>

Hey egoist!

My team is interested in using jsx with vue, and some of us are big fans of the styled-component/emotion paradigm. We're looking for a viable option for this approach with vue. The vue-styled-component library seems to have some issues with lack of maintenance and not being feature complete. So I was curious where you would place this project on the spectrum of stability/feature completed-ness? It looks like there hasn't been a whole lot of activity on it, but I wasn't sure if this was because you didn't have more time to put into it, or because extending the Emotion api to function with Vue was pretty trivial and hasn't required more work than you've put into it.

Thoughts/advice? Would you be comfortable incorporating this library into a commercial grade product, if you were in my place?

I want to set the theming options like we can do in React by using ThemeProvider from emotion-theming.

If there a way to same through props types like in vue-styled-components
https://github.com/styled-components/vue-styled-components#adapting-based-on-props

I have a issue where the prop value is not removed the the Dom. e.g.

const StyledBox = styled('div')`
  background-color: ${props => props.background};

<template>
  <StyledBox background="red">
    <slot/>
  </StyledBox>
</template>

renders

<div data-v-02e4c64b="" data-v-469af010="" background="red" class="css-1a3rjkp">Box 1</div>

Ideally we should not be seeing background="red" as an attribute.

All of my props given to a StyledComponent are getting swallowed by the styled component, and none of them are making it to the component targeted by the styled function. Seems like this is a substantial flaw.

Reproduction: https://codesandbox.io/s/vue-template-ydk8m?fontsize=14

Reproduce: https://codesandbox.io/s/z2m69vxnw4

const Item = {
  name: "Item",
  data() {
    return {};
  },
  render() {
    console.log(this.$slots);
    return (
      <div>
        <div style="font-size: 20px">1:{this.$slots.title}</div>
        <div>2:{this.$slots.default}</div>
      </div>
    );
  }
};

const Wrapper = {
  name: "Wrapper",
  data() {
    return {};
  },
  render() {
    return (
      <div>
        ----correct:-----------------------------
        <Item>
          <div>content</div>
          <div slot="title">title</div>
        </Item>
        ----incorrect:-----------------------------
        <StyledItem>
          <div>content</div>
          <div slot="title">title</div>
        </StyledItem>
      </div>
    );
  }
};

const StyledItem = styled(Item)`
  color: red;
`;

result:

----correct:-----------------------------
1:
title
2:
content
----incorrect:-----------------------------
1:
2:
content
title                     <-----expect pass to $slot.title, but actually $slots.default