我正在尝试在Google Dialogflow Messenger上进行一些自定义样式，但由于＃shadow-root而无法执行该样式以下是一些我可以更改的值的列表，但我需要对其进行更多样式设置。
--df-messenger-bot-message: #fff;
--df-messenger-button-titlebar-color: #0041C2;
--df-messenger-button-titlebar-color: #0041C2;
--df-messenger-chat-background-color: #fafafa;
--df-messenger-font-color: #000;
--df-messenger-send-icon: #00adff;
--df-messenger-user-message: #0041C2;
--df-messenger-chip-border-color:#0041C2;
<div class="container">
<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
<df-messenger intent="WELCOME" chat-title="test" agent-id="" language-code="en" chat-icon="vest.jpg">
<style>
.container {
background-image: url("img.png");
background-repeat: no-repeat;
min-height: 940px;
height: 100%;
margin: 10px 30px;
}
df-messenger {
--df-messenger-bot-message: #fff;
--df-messenger-button-titlebar-color: #0041C2;
--df-messenger-button-titlebar-color: #0041C2;
--df-messenger-chat-background-color: #fafafa;
--df-messenger-font-color: #000;
--df-messenger-send-icon: #00adff;
--df-messenger-user-message: #0041C2;
--df-messenger-chip-border-color:#0041C2;
}
</style>
</df-messenger>
</div>
Just try placing style tag in your HTML head. This is something working for me.
<html>
<head>
<title>Student helpdesk - Demo</title>
<meta name="viewport" content="width-device-width, initial-scale=1">
<style>
df-messenger {
--df-messenger-bot-message: #878fac;
--df-messenger-button-titlebar-color: #df9b56;
--df-messenger-chat-background-color: #fafafa;
--df-messenger-font-color: white;
--df-messenger-send-icon: #878fac;
--df-messenger-user-message: #479b3d;
}
</style>
</head>
<body>
...