diff --git a/examples/html-styled/Main.elm b/examples/html-styled/Main.elm
index be0e7c15..04937bd8 100644
--- a/examples/html-styled/Main.elm
+++ b/examples/html-styled/Main.elm
@@ -4,7 +4,7 @@ import Browser
 import Css exposing (..)
 import Html
 import Html.Styled exposing (..)
-import Html.Styled.Attributes exposing (css, href, src)
+import Html.Styled.Attributes exposing (class, css, href, src)
 import Html.Styled.Events exposing (onClick)
 import Svg.Styled as StyledSvg
 import Svg.Styled.Attributes as SvgAttribs
@@ -82,9 +82,15 @@ legacyBorderRadius amount =
 view : Model -> Html Msg
 view model =
     nav []
-        [ img [ src "assets/backdrop.jpg", css [ width (pct 100) ] ] []
+        [ img [ src "assets/backdrop.jpg", css [ width (pct 100) ], class "some-whatever-class" ] []
         , btn [ onClick DoSomething ] [ text "Click me!" ]
-        , StyledSvg.svg [ SvgAttribs.css [], SvgAttribs.width "100", SvgAttribs.height "100" ] [ StyledSvg.circle [ SvgAttribs.cx "50", SvgAttribs.cy "50", SvgAttribs.r "40" ] [] ]
+        , StyledSvg.svg
+            [ SvgAttribs.class "some-whatever-NS-class"
+            , SvgAttribs.css [ color (rgb 256 0 0)
+            , SvgAttribs.width "100"
+            , SvgAttribs.height "100"
+            ]
+            [ StyledSvg.circle [ SvgAttribs.cx "50", SvgAttribs.cy "50", SvgAttribs.r "40" ] [] ]
         ]
 
 
diff --git a/src/VirtualDom/Styled.elm b/src/VirtualDom/Styled.elm
index c7d7937a..9b89574c 100644
--- a/src/VirtualDom/Styled.elm
+++ b/src/VirtualDom/Styled.elm
@@ -315,7 +315,7 @@ unstyleNS ns elemType properties children =
             toStyleNode styles
 
         unstyledProperties =
-            List.map (extractUnstyledAttribute styles) properties
+            List.map (extractUnstyledAttributeNS styles) properties
     in
     VirtualDom.nodeNS ns
         elemType
@@ -370,7 +370,7 @@ unstyleKeyedNS ns elemType properties keyedChildren =
             toKeyedStyleNode styles keyedChildNodes
 
         unstyledProperties =
-            List.map (extractUnstyledAttribute styles) properties
+            List.map (extractUnstyledAttributeNS styles) properties
     in
     VirtualDom.keyedNodeNS
         ns
@@ -489,6 +489,20 @@ stylesFromPropertiesHelp candidate properties =
 
 extractUnstyledAttribute : Dict CssTemplate Classname -> Attribute msg -> VirtualDom.Attribute msg
 extractUnstyledAttribute styles (Attribute val isCssStyles cssTemplate) =
+    if isCssStyles then
+        case Dict.get cssTemplate styles of
+            Just classname ->
+                VirtualDom.property "className" (Json.Encode.string classname)
+
+            Nothing ->
+                VirtualDom.property "className" (Json.Encode.string "_unstyled")
+
+    else
+        val
+
+
+extractUnstyledAttributeNS : Dict CssTemplate Classname -> Attribute msg -> VirtualDom.Attribute msg
+extractUnstyledAttributeNS styles (Attribute val isCssStyles cssTemplate) =
     if isCssStyles then
         case Dict.get cssTemplate styles of
             Just classname ->
@@ -536,7 +550,7 @@ accumulateStyledHtml html ( nodes, styles ) =
                 vdomNode =
                     VirtualDom.nodeNS ns
                         elemType
-                        (List.map (extractUnstyledAttribute finalStyles) properties)
+                        (List.map (extractUnstyledAttributeNS finalStyles) properties)
                         (List.reverse childNodes)
             in
             ( vdomNode :: nodes, finalStyles )
@@ -567,7 +581,7 @@ accumulateStyledHtml html ( nodes, styles ) =
                 vdomNode =
                     VirtualDom.keyedNodeNS ns
                         elemType
-                        (List.map (extractUnstyledAttribute finalStyles) properties)
+                        (List.map (extractUnstyledAttributeNS finalStyles) properties)
                         (List.reverse childNodes)
             in
             ( vdomNode :: nodes, finalStyles )
diff --git a/tests/Styled.elm b/tests/Styled.elm
index 4ff82b9b..33d81d44 100644
--- a/tests/Styled.elm
+++ b/tests/Styled.elm
@@ -4,7 +4,7 @@ module Styled exposing (all)
 
 import Css exposing (..)
 import Html.Styled exposing (Html, a, button, div, header, img, nav, text, toUnstyled)
-import Html.Styled.Attributes exposing (css, src)
+import Html.Styled.Attributes exposing (class, css, src)
 import Test exposing (Test, describe)
 import Test.Html.Query as Query
 import Test.Html.Selector as Selector
@@ -107,4 +107,37 @@ all =
                         , Selector.text "._20d887e{padding:16px;padding-left:24px;padding-right:24px;margin-left:50px;margin-right:auto;color:rgb(255,255,255);background-color:rgb(27,217,130);vertical-align:middle;}"
                         ]
             )
+        , bug564
+        ]
+
+
+bug564 : Test
+bug564 =
+    describe "Github Issue #564: https://github.com/rtfeldman/elm-css/issues/564"
+        [ Test.test "generated class is included when there's no custom class" <|
+            \_ ->
+                div
+                    [ css [ color (rgb 0 0 0) ]
+                    ]
+                    []
+                    |> toUnstyled
+                    |> Query.fromHtml
+                    |> Query.has [ Selector.class "_5dc67897" ]
+        , Test.test "custom class is included when there's no generated class" <|
+            \_ ->
+                div [ class "some-custom-class" ]
+                    []
+                    |> toUnstyled
+                    |> Query.fromHtml
+                    |> Query.has [ Selector.class "some-custom-class" ]
+        , Test.test "custom class is included as well as generated class" <|
+            \_ ->
+                div
+                    [ css [ color (rgb 0 0 0) ]
+                    , class "some-custom-class"
+                    ]
+                    []
+                    |> toUnstyled
+                    |> Query.fromHtml
+                    |> Query.has [ Selector.classes [ "_5dc67897", "some-custom-class" ] ]
         ]